src/app/recipe.service.ts

@@ -6,7 +6,21 @@ import { Recipe } from '../cookbook/type';
 })
 export class RecipeService {
   #recipes: Recipe[] = [
-    {id: 0, name: 'crepe', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []}
+    {id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 4, name: 'crepe5', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 5, name: 'crepe6', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 6, name: 'crepe7', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 7, name: 'crepe8', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 8, name: 'crepe9', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 9, name: 'crepe10', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 10, name: 'crepe11', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 11, name: 'crepe12', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 12, name: 'crepe13', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    {id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+
   ];
 
   constructor() {}

src/app/recipes/recipes.component.html

@@ -28,6 +28,13 @@
         </td>
       </ng-container>
 
+      <ng-container matColumnDef="image">
+        <th mat-header-cell *matHeaderCellDef> image </th>
+        <td mat-cell *matCellDef="let element">
+          <img src="https://placehold.co/200x200">
+        </td>
+      </ng-container>
+
   
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

src/app/recipes/recipes.component.ts

@@ -12,7 +12,7 @@ import { Recipe } from '../../cookbook/type';
   templateUrl: './recipes.component.html',
 })
 export class RecipesComponent {
-  displayedColumns: string[] = ['id','name','description'];
+  displayedColumns: string[] = ['id','name','description','image'];
   dataSource = new MatTableDataSource<Recipe>();
 
   constructor(protected recipes: RecipeService){