feat: add component scroll loading

src/app/app.module.ts

@@ -9,6 +9,7 @@ import {HeaderModule} from './components/header/header.module';
 import {ProductsListModule} from './pages/products-list/products-list.module';
 import {SidenavModule} from './components/sidenav/sidenav.module';
 import {InsertShadowModule} from './shared/insert-shadow/insert-shadow.module';
+import {ScrollLoadingDirective} from './shared/scroll-loading/scroll-loading.directive';
 
 @NgModule({
     declarations: [AppComponent],
@@ -22,6 +23,7 @@ import {InsertShadowModule} from './shared/insert-shadow/insert-shadow.module';
         SidenavModule,
         MatListModule,
         InsertShadowModule,
+        ScrollLoadingDirective,
     ],
     bootstrap: [AppComponent],
 })

src/app/pages/products-list/products-list.component.html

@@ -17,13 +17,13 @@
 
 <ng-template let-value [ngIf]="products" [ngIfElse]="loaderTemplate">
     <!-- Раскомментировать div при выполнении ДЗ -->
-    <!-- <div appScrollWithLoading class="scroll-container" (loadData)="onLoad($event)"> -->
-    <app-card class="card" [product]="value[0] || null"></app-card>
-    <app-card class="card" [product]="value[1] || null"></app-card>
-    <app-card class="card" [product]="value[2] || null"></app-card>
-    <app-card class="card" [product]="value[3] || null"></app-card>
-    <app-card class="card" [product]="value[4] || null"></app-card>
-    <!-- </div> -->
+    <div appScrollLoading class="scroll-container" (loadData)="onLoad($event)">
+        <app-card class="card" [product]="value[0] || null"></app-card>
+        <app-card class="card" [product]="value[1] || null"></app-card>
+        <app-card class="card" [product]="value[2] || null"></app-card>
+        <app-card class="card" [product]="value[3] || null"></app-card>
+        <app-card class="card" [product]="value[4] || null"></app-card>
+    </div>
 </ng-template>
 
 <ng-template #loaderTemplate>

src/app/pages/products-list/products-list.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {Direction} from 'src/app/shared/scroll-loading/scroll-loading.const';
 import {productsMock} from '../../shared/products/products.mock';
 import {IProduct} from '../../shared/products/product.interface';
 
@@ -22,4 +23,9 @@ export class ProductsListComponent implements OnInit {
             this.productsStore = productsMock;
         }, 4000);
     }
+
+    onLoad(event: Direction) {
+        /* eslint no-console:0 */
+        console.log('event', event);
+    }
 }

src/app/pages/products-list/products-list.module.ts

@@ -4,10 +4,11 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ProductsListComponent} from './products-list.component';
 import {CardModule} from './card/card.module';
 import {IfModule} from '../../shared/if/if.module';
+import {ScrollLoadingDirective} from '../../shared/scroll-loading/scroll-loading.directive';
 
 @NgModule({
     declarations: [ProductsListComponent],
-    imports: [CardModule, IfModule, CommonModule, MatProgressSpinnerModule],
+    imports: [CardModule, IfModule, CommonModule, MatProgressSpinnerModule, ScrollLoadingDirective],
     exports: [ProductsListComponent],
 })
 export class ProductsListModule {}

src/app/shared/scroll-loading/scroll-loading.const.ts

@@ -0,0 +1,6 @@
+export const offset = 100;
+
+export enum Direction {
+    Top = 'top',
+    Bottom = 'bottom',
+}

src/app/shared/scroll-loading/scroll-loading.directive.spec.ts

@@ -0,0 +1,9 @@
+import {ScrollLoadingDirective} from './scroll-loading.directive';
+
+describe('ScrollLoadingDirective', () => {
+    it('should create an instance', () => {
+        const directive = new ScrollLoadingDirective();
+
+        expect(directive).toBeTruthy();
+    });
+});

src/app/shared/scroll-loading/scroll-loading.directive.ts

@@ -0,0 +1,31 @@
+import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
+import {Direction, offset} from './scroll-loading.const';
+
+@Directive({
+    selector: '[appScrollLoading]',
+    standalone: true,
+})
+export class ScrollLoadingDirective {
+    @Output() loadData = new EventEmitter<Direction>();
+
+    protected scrollTop = 0;
+
+    @HostListener('scroll', ['$event'])
+    onMouseScroll(event: Event) {
+        const {scrollTop, clientHeight, scrollHeight} = event.target as HTMLElement;
+
+        // Проверяем, что спускаемся вниз
+        if (this.scrollTop < scrollTop) {
+            if (clientHeight + scrollTop > scrollHeight - offset) {
+                // Генерируем событие с направлением вниз
+                this.loadData.emit(Direction.Bottom);
+            }
+        } else if (scrollTop < offset) {
+            // Или поднимаемся наверх
+            // Генерируем событие с направлением вверх
+            this.loadData.emit(Direction.Top);
+        }
+
+        this.scrollTop = scrollTop;
+    }
+}

src/app/shared/scroll-loading/scroll-loading.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ScrollLoadingDirective} from './scroll-loading.directive';
+
+@NgModule({
+    declarations: [ScrollLoadingDirective],
+    exports: [ScrollLoadingDirective],
+    imports: [CommonModule],
+})
+export class ScrollLoadingModule {}