add recipes table

src/app/app.config.ts

@@ -6,5 +6,5 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync()]
+  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync(), provideAnimationsAsync()]
 };

src/app/recipe.service.ts

@@ -11,8 +11,8 @@ export class RecipeService {
 
   constructor() {}
 
-  getAll(): Promise<Recipe[]> {
-    return Promise.resolve(this.#recipes);
+  getAll(): Recipe[] {
+    return this.#recipes;
   }
 
   get(id: number): Recipe | null {

src/app/recipes/recipes.component.html

@@ -1 +1,40 @@
-<p>recipes works!</p>
+<div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource">
+  
+      <!-- Position Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> id </th>
+        <td mat-cell *matCellDef="let element"> 
+            <a [routerLink]="['/recipe/', element.id]" >
+                {{element.id}}
+            </a>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> name </th>
+        <td mat-cell *matCellDef="let element">
+            <a [routerLink]="['/recipe/', element.id]" >
+                {{element.name}}
+            </a>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef> description </th>
+        <td mat-cell *matCellDef="let element">
+            <a [routerLink]="['/recipe/', element.id]" >
+                {{element.description}}
+            </a>
+        </td>
+      </ng-container>
+
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  
+    <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+                   showFirstLastButtons
+                   aria-label="Select page of periodic elements">
+    </mat-paginator>
+  </div>

src/app/recipes/recipes.component.ts

@@ -1,10 +1,29 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild,} from '@angular/core';
+import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatTableDataSource, MatTableModule} from '@angular/material/table';
+import { RecipeService } from '../recipe.service';
+import {RouterLink} from '@angular/router'
+import { Recipe } from '../../cookbook/type';
 
 @Component({
   selector: 'app-recipes',
   standalone: true,
-  imports: [],
+  imports: [MatTableModule, MatPaginatorModule,RouterLink],
   templateUrl: './recipes.component.html',
 })
 export class RecipesComponent {
+  displayedColumns: string[] = ['id','name','description'];
+  dataSource = new MatTableDataSource<Recipe>();
+
+  constructor(protected recipes: RecipeService){
+    this.dataSource = new MatTableDataSource<Recipe>(recipes.getAll());
+  }
+  
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+
 }
+