feat: created pagination directive and directories

angular.json

@@ -112,6 +112,7 @@
 	},
 	"defaultProject": "Angular-learnjs-130622",
 	"cli": {
+		"analytics": false,
 		"defaultCollection": "@angular-eslint/schematics"
 	}
 }

src/app/app.component.html

@@ -2,7 +2,11 @@
 <app-sidenav #sidenav appInsertShadow>
     <input #input type="text">
     <app-products></app-products>
-
+<!--    <ng-template #list let-implicit let-name="name" let-user="user">-->
+<!--      {{implicit}}-->
+<!--      {{name}}-->
+<!--      {{user.age}}-->
+<!--    </ng-template>-->
     <ng-template #list>
         <mat-list appInsertShadow role="list" class="mat-list">
             <mat-list-item #listItem role="listitem">Item 1</mat-list-item>
@@ -11,4 +15,4 @@
         </mat-list>
     </ng-template>
 </app-sidenav>
-<app-popup-host [template]="list"></app-popup-host>
+<!--<app-popup-host [template]="list"></app-popup-host>-->

src/app/components/sidenav/sidenav.component.ts

@@ -45,5 +45,19 @@ export class SidenavComponent implements OnInit {
 	private insertList(template: TemplateRef<unknown>) {
 		this.drawerViewPortElement.clear();
 		this.drawerViewPortElement.createEmbeddedView(template);
+
+		// setTimeout(() => {
+		//   this.drawerViewPortElement.clear();
+		//   this.drawerViewPortElement.createEmbeddedView(template,
+		//     {
+		//       name: 'Egor',
+		//       $implicit: 'Angular LearnJs',
+		//       user: {
+		//         age: '35',
+		//       }
+		//     });
+		//
+		//   this.changeDetectorRef.markForCheck();
+		// }, 3000)
 	}
 }

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

@@ -3,20 +3,22 @@
       <mat-card-title>{{product?.name}}</mat-card-title>
       <mat-card-subtitle>{{product?.price}} Р</mat-card-subtitle>
     </mat-card-header>
-    <div class="galerey">
-        <button mat-icon-button>
-            <mat-icon>
-                chevron_left
-            </mat-icon>
-        </button>
-        <img mat-card-image [src]="product.images[0].url" alt="Product photo">
-        <button mat-icon-button>
-            <mat-icon>
-                chevron_right
-            </mat-icon>
-        </button>
-    </div>
+<!--    <ng-template appCarousel let-img [appCarouselOf]="product?.images" class="galerey" (emitPrev)="onRegisterPrev($event)" (emitNext)="next = $event">-->
+       <div *appCarousel="let img of product?.images; let prev = prev; let next = next" class="galerey">
+         <button mat-icon-button (click)="prev()">
+           <mat-icon>
+             chevron_left
+           </mat-icon>
+         </button>
+         <img class="card__img" mat-card-image [src]="img.url" alt="Product photo">
+         <button mat-icon-button (click)="next()">
+           <mat-icon>
+             chevron_right
+           </mat-icon>
+         </button>
+       </div>
+<!--    </ng-template>-->
     <mat-card-actions class="mat-card-actions-align-end">
       <button mat-button (click)="onProductBuy($event)">BUY</button>
     </mat-card-actions>
-  </mat-card>
+  </mat-card>

src/app/pages/products-list/product-card/product-card.component.less

@@ -3,7 +3,8 @@
 }
 
 .card {
-	width: 100%;
+	width: 500px;
+	margin-bottom: 10px;
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { IProduct } from '../../../shared/products/product.interface';
 
 @Component({
@@ -7,8 +7,8 @@ import { IProduct } from '../../../shared/products/product.interface';
 	styleUrls: ['./product-card.component.less'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductCardComponent {
-	@Input() product!: IProduct;
+export class ProductCardComponent implements OnInit {
+	@Input() product: IProduct | undefined;
 
 	@Output() buyProduct = new EventEmitter<void>();
 
@@ -17,4 +17,20 @@ export class ProductCardComponent {
 
 		this.buyProduct.emit();
 	}
+
+	// prev!: () => void;
+	// next!: () => void;
+	//
+	// onRegisterPrev(fn: () => void) {
+	//   this.prev = fn;
+	// }
+	//
+
+	// get imgSrc(): string {
+	// 	return this.product?.images[0].url || '';
+	// }
+
+	ngOnInit() {
+		console.log(this.product, 'ProductCardComponent created');
+	}
 }

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

@@ -1,5 +1,61 @@
 <!-- <button [appNgClass]="{hover: isHovered}" [ngStyle]="{color: '#fff'}">Button</button> -->
-<app-product-card class="product" [product]="products[0]"></app-product-card>
-<app-product-card class="product" [product]="products[1]"></app-product-card>
-<app-product-card class="product" [product]="products[2]"></app-product-card>
-<app-product-card class="product" [product]="products[3]"></app-product-card>
+<div *ngIf="products; else spinner" class="container">
+  <ng-container
+    *appPagination="let content of products;
+    elementSize: 2;
+    let prev = prev;
+    let next = next;
+    let activeIndex = index;
+    let allIndexes = allIndexes;
+    let selectIndex = selectIndex"
+  >
+    <!--<ng-template [ngIf]="products" [ngIfElse]="spinner">-->
+
+      <!--    <ng-template ngFor let-product let-index="index" [ngForOf]="products" [ngForTrackBy]="trackBy">-->
+      <!--      <app-product-card class="product" [product]="products[index]"></app-product-card>-->
+      <!--    </ng-template>-->
+      <!--    *ngFor="products" [ngForTrackBy]="trackBy">-->
+
+      <app-product-card *ngFor="let product of content trackBy: trackBy; let index = index"
+
+        class="product" [product]="product">
+        {{content}}
+        {{product}}
+      </app-product-card>
+
+
+    <!--</ng-template>-->
+
+<!--    <ng-template #spinner >-->
+<!--      <mat-spinner class="spinner"></mat-spinner>-->
+<!--    </ng-template>-->
+
+
+
+    <div class="pagination">
+      <button class="pagination__button" mat-icon-button (click)="prev()">
+        <mat-icon>
+          chevron_left
+        </mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let index of allIndexes"
+        class="pagination__button--active"
+        (click)="selectIndex(index)">
+        {{index}}
+      </button>
+
+      <button class="pagination__button" mat-icon-button (click)="next()">
+        <mat-icon>
+          chevron_right
+        </mat-icon>
+      </button>
+    </div>
+  </ng-container>
+</div>
+<ng-template #spinner >
+  <mat-spinner class="spinner"></mat-spinner>
+</ng-template>
+
+

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

@@ -15,3 +15,17 @@
 // 	color: red;
 // 	background-color: red;
 // }
+
+.spinner {
+	margin: 0 auto;
+}
+
+.pagination {
+	display: flex;
+	align-items: center;
+	&__button {
+		&--active {
+			color: red;
+		}
+	}
+}

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

@@ -1,25 +1,54 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { productsMock } from '../../shared/products/products.mock';
+import { IProduct } from '../../shared/products/product.interface';
+import { Subject } from 'rxjs';
 
 @Component({
 	selector: 'app-products',
 	templateUrl: './products.component.html',
 	styleUrls: ['./products.component.less'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductsComponent {
-	products = productsMock;
+export class ProductsComponent implements OnInit {
+	products: IProduct[] | undefined = undefined;
 
-	// isHovered = true;
+	items = [2, 34, 5, 6, 7, 3, 3, 5, 4];
+	constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
-	// constructor(
-	// 	private changeDetectorRef: ChangeDetectorRef,
-	// ) {}
+	ngOnInit() {
+		// setTimeout(() => {
+		//   this.products = productsMock.slice(0, 4);
+		//   this.changeDetectorRef.markForCheck();
+		// }, 2000)
+		//
+		// setTimeout(() => {
+		//   console.log(' ')
+		// }, 3000)
 
-	// ngOnInit() {
-	// 	setTimeout(() => {
-	// 		this.isHovered = false;
-	// 		this.changeDetectorRef.markForCheck();
-	// 	}, 3000)
-	// }
+		console.log(this.items.slice(2, 4), 'slice');
+		setTimeout(() => {
+			this.products = productsMock.map((item) => ({ ...item }));
+			this.changeDetectorRef.markForCheck();
+		}, 2000);
+		//
+		// setTimeout(() => {
+		//   console.log(' ')
+		// }, 6000)
+
+		setTimeout(() => {
+			// this.products = productsMock.map(item => ({...item, name: item.name + '1245'}));
+			// this.products?.forEach((_, index: number) => {
+			//   if (this.products) {
+			//     this.products[index].name = '1345';
+			//   }
+			// })
+			this.changeDetectorRef.markForCheck();
+		}, 3000);
+	}
+
+	trackBy(_: number, item: IProduct) {
+		return item._id;
+		// return item.name;
+		// return item;
+	}
 }

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

@@ -6,10 +6,24 @@ import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NgClassModule } from '../../shared/ng-class/ng-class.module';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ForModule } from '../../shared/for/for.module';
+import { CarouselModule } from '../../shared/carousel/carousel.module';
+import { PaginationModule } from '../../shared/pagination/pagination.module';
 
 @NgModule({
 	declarations: [ProductsComponent, ProductCardComponent],
-	imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, NgClassModule],
+	imports: [
+		CommonModule,
+		MatCardModule,
+		MatButtonModule,
+		MatIconModule,
+		NgClassModule,
+		MatProgressSpinnerModule,
+		ForModule,
+		CarouselModule,
+		PaginationModule,
+	],
 	exports: [ProductsComponent],
 })
 export class ProductsModule {}

src/app/shared/carousel/carousel.directive.spec.ts

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