pagination

angular.json

@@ -93,5 +93,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/components/recipe-list/recipe-list.component.css

@@ -3,4 +3,8 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 2rem;
+}
+
+.pagination {
+  font-size: 1.2rem;
 }

src/app/components/recipe-list/recipe-list.component.html

@@ -1,5 +1,10 @@
 <h1>{{ 'recipe.list' | transloco }}</h1>
 
 <div id="recipe-list">
-  <app-recipe-mini *ngFor="let recipe of recipes" [recipe]="recipe"></app-recipe-mini>
-</div>
+  <app-recipe-mini *ngFor="let recipe of paginatedRecipes" [recipe]="recipe"></app-recipe-mini>
+
+</div>
+
+<mat-paginator class="pagination" (page)="handlePageEvent($event)" [length]="length" [pageSize]="pageSize"
+  [pageIndex]="pageIndex">
+</mat-paginator>

src/app/components/recipe-list/recipe-list.component.ts

@@ -4,22 +4,34 @@ import { RecipeService } from '../../services/recipe.service';
 import { NgFor } from '@angular/common';
 import { RecipeMiniComponent } from '../recipe-mini/recipe-mini.component';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
-  imports: [NgFor, RecipeMiniComponent, TranslocoPipe],
+  imports: [NgFor, RecipeMiniComponent, TranslocoPipe, MatPaginatorModule],
   templateUrl: './recipe-list.component.html',
   styleUrl: './recipe-list.component.css'
 })
 export class RecipeListComponent {
-  recipes : Recipe[] = [];
+  recipes: Recipe[] = [];
+  paginatedRecipes: Recipe[] = [];
+  length?: number;
+  pageSize = 10;
+  pageIndex = 0;
 
-  constructor(protected recipeService: RecipeService){}
+  constructor(protected recipeService: RecipeService) { }
 
-  ngOnInit(){
+  ngOnInit() {
     this.recipes = this.recipeService.getRecipes();
+    this.length = this.recipes.length;
+    this.paginatedRecipes = this.recipes.slice(this.pageIndex * this.pageSize, (this.pageIndex +1) * this.pageSize)
   }
 
-
+  handlePageEvent(e: PageEvent) {
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+    this.paginatedRecipes = this.recipes.slice(this.pageIndex * this.pageSize, (this.pageIndex +1) * this.pageSize)
+  }
 }