add nav

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">
 
-
     <div class="container_text">
+        <h1>{{recipe.name}}</h1>
+        <p>
+            {{recipe.description}}
+        </p>
 
-     <h1>{{recipe.name}}</h1>
-     <p>
-        {{recipe.description}}
-     </p>
-
-     <h3>Ingredients</h3>
-     <p>
-        <li *ngFor="let ingredient of recipe.ingredients">
-            {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
-        </li>
-     </p>
-
+        <h3>Ingredients</h3>
+        <p>
+            <li *ngFor="let ingredient of recipe.ingredients">
+                {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
+            </li>
+        </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 {