src/app/app.component.html

@@ -1,3 +1,7 @@
 Tiramisu
 
+<button mat-button [routerLink]="['/recipes']">Les recettes</button>
+<button mat-button [routerLink]="['/recipe/add']">Ajout recette</button>
+
+
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { RecipeService } from './recipe.service';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, MatMenuModule, MatButtonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   providers: [RecipeService],

src/app/recipe/recipe.component.html

@@ -15,24 +15,24 @@
 }
 </style>
 
+<button mat-button [routerLink]="['/recipe/',recipe.id,'edit']">Update</button>
+
 <div class="container">
-    <img [src]="recipe.image || 'https://placehold.co/200x200'" [alt]="recipe.image ? recipe.name : ''" width="200" height="200">
 
+    <img [src]="recipe.image || 'https://placehold.co/200x200'" [alt]="recipe.image ? recipe.name : ''" width="200" height="200">
 
     <div class="container_text">
-
+        <h1>{{recipe.name}}</h1>
-     <h1>{{recipe.name}}</h1>
+        <p>
-     <p>
+            {{recipe.description}}
-        {{recipe.description}}
+        </p>
-     </p>
+
-
+        <h3>Ingredients</h3>
-     <h3>Ingredients</h3>
+        <p>
-     <p>
+            <li *ngFor="let ingredient of recipe.ingredients">
-        <li *ngFor="let ingredient of recipe.ingredients">
+                {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
-            {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
+            </li>
-        </li>
+        </p>
-     </p>
-
     </div>
 </div>
 

src/app/recipe/recipe.component.ts

@@ -2,11 +2,14 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule, RouterLink],
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {