update interface detail recipe

src/app/recipe-add/recipe-add.component.html

@@ -1,4 +1,5 @@
 <form [formGroup]="createForm" (ngSubmit)="onSubmit()">
+    <div>
         <mat-form-field>
             <label for="name">Nom</label>
             <input matInput id="name" type="text" formControlName="name" required>
@@ -9,6 +10,8 @@
                 <mat-error>Le nom ne peut dépasser {{ createForm.controls.name.errors!['maxlength'].requiredLength }} caractères.</mat-error>
             }
         </mat-form-field>
+    </div>
+    <div>
         <mat-form-field>
             <label for="description">Description</label>
             <textarea matInput id="description" type="text" formControlName="description" required></textarea>
@@ -16,6 +19,7 @@
                 <mat-error>La description ne peut dépasser {{ createForm.controls.description.errors!['maxlength'].requiredLength }} caractères.</mat-error>
             }
         </mat-form-field>
+    </div>
     <div>
         <label for="image">Image</label>
         <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
@@ -29,11 +33,13 @@
                 <li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
             }
         </ul>
-        <select id="selectedIngredient" formControlName="selectedIngredient">
+        <mat-form-field>
+            <select matInput id="selectedIngredient" formControlName="selectedIngredient">
                 @for (ingredient of ingredients; track ingredient.id) {
-                <option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
+                    <option matInput [ngValue]="ingredient.id">{{ ingredient.name }}</option>
                 }
             </select>
+        </mat-form-field>
         <button mat-button type="button" (click)="onAddIngredient()">Add</button>
     </div>
     <button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>

src/app/recipe-add/recipe-add.component.ts

@@ -22,10 +22,7 @@ export class RecipeAddComponent {
   });
 
   ingredientEntries: IngredientEntry[] = [];
-  ingredients: Ingredient[] = [{
+  ingredients: Ingredient[] = [];
-    id: 1,
-    name: 'Paprika',
-  }];
 
   selectedFilename: string = '';
 
@@ -48,7 +45,10 @@ export class RecipeAddComponent {
     return this.#recipeId;
   }
 
-  constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {}
+  constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
+    this.ingredients = this.recipes.getAllIngredients();
+    console.log(this.ingredients);
+  }
 
   onSubmit(): void {
     if (this.createForm.invalid) {

src/app/recipe.service.ts

@@ -1,12 +1,15 @@
 import { Injectable } from '@angular/core';
-import { Recipe } from '../cookbook/type';
+import { Ingredient, Recipe } from '../cookbook/type';
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecipeService {
   #recipes: Recipe[] = [
-    { id: 0, name: 'crepe1', 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: [
+      {idIngredient:1,idRecipe:0,quantity:10},
+      {idIngredient:2,idRecipe:0,quantity:15}
+    ] },
     { 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: [] },
@@ -22,14 +25,27 @@ export class RecipeService {
     { id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
   ];
 
+  #ingredients: Ingredient[] = [
+    { id:1, name:'Sucre'},
+    { id:2, name:'Farine'}
+  ]
+
   getAll(): Recipe[] {
     return this.#recipes;
   }
 
+  getAllIngredients(): Ingredient[] {
+    return this.#ingredients;
+  }
+
   get(id: number): Recipe | null {
     return this.#recipes.find((recipe) => recipe.id === id) || null;
   }
 
+  getIngredientById(id: number): Ingredient | null {
+    return this.#ingredients.find((ingredient) => ingredient.id === id) || null;
+  }
+
   add(recipe: Omit<Recipe, 'id'>): void {
     const id = this.#recipes.length ? Math.max(...this.#recipes.map((recipe) => recipe.id)) + 1 : 1;
     this.#recipes.push({

src/app/recipe/recipe.component.html

@@ -1,4 +1,39 @@
-<p>{{recipe.id}}</p>
+<style>
-<p>{{recipe.name}}</p>
+ .container {
-<p>{{recipe.description}}</p>
+	 background-color: #fff;
+	 position: relative;
+	 display: grid;
+	 grid-template-columns: 300px 600px;
+}
+ .container img {
+	 width: 300px;
+	 height: 300px;
+}
+
+ .container_text {
+	 padding: 40px 40px 0;
+}
+</style>
+
+<div class="container">
+    <img ng-if="recipe.image" src="https://placehold.co/200x200" alt={{recipe.name}}/>
+
+    <div class="container_text">
+
+     <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>
+
+    </div>
+</div>
+
+
 

src/app/recipe/recipe.component.ts

@@ -1,11 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {