Merge pull request 'Add navigation utilities' (#6) from navigation into main

Reviewed-on: #6

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,12 +15,13 @@
 }
 </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>
         <p>
             {{recipe.description}}
@@ -32,7 +33,6 @@
                 {{ 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 {