add submit button with mat angular

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

@@ -1,25 +1,44 @@
 <form [formGroup]="createForm" (ngSubmit)="onSubmit()">
     <div>
-        <label for="name">Nom</label>
+        <mat-form-field>
-        <input id="name" type="text" formControlName="name" required>
+            <label for="name">Nom</label>
+            <input matInput id="name" type="text" formControlName="name" required>
+        </mat-form-field>
     </div>
     <div>
-        <label for="description">Description</label>
+        <mat-form-field>
-        <textarea id="description" type="text" formControlName="description" required></textarea>
+            <label for="description">Description</label>
+            <textarea matInput id="description" type="text" formControlName="description" required></textarea>
+        </mat-form-field>
     </div>
+
     <div>
         <label for="description">Ingrédients</label>
+
+        <mat-form-field>
+            <mat-label>Ingrédients</mat-label>
+            <mat-select matInput id="selectedIngredient" formControlName="selectedIngredient">
+                @for (ingredient of ingredients; track ingredient.id) {
+                    <mat-option value="{{ingredient.id}}">{{ ingredient.name }}</mat-option>
+                }
+            </mat-select>
+        </mat-form-field>
+        <button type="button" (click)="onAddIngredient()">Add</button>
+
+
+
+
         <ul>
             @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
-                <li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
+                <li>
+                    {{ getIngredient(ingredient.idIngredient).name }}
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
+                    </mat-form-field>
+                </li>
             }
         </ul>
-        <select id="selectedIngredient" formControlName="selectedIngredient">
-            @for (ingredient of ingredients; track ingredient.id) {
-                <option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
-            }
-        </select>
-        <button type="button" (click)="onAddIngredient()">Add</button>
     </div>
-    <button class="button" type="submit">Ajouter</button>
+
+    <button mat-stroked-button type="submit">SUBMIT</button>
 </form>

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

@@ -3,11 +3,15 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { Router } from '@angular/router';
 import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatButtonModule} from '@angular/material/button';
 
 @Component({
   selector: 'app-recipe-add',
   standalone: true,
-  imports: [ReactiveFormsModule, FormsModule],
+  imports: [ReactiveFormsModule, FormsModule,MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
@@ -18,10 +22,11 @@ export class RecipeAddComponent {
   });
 
   ingredientEntries: IngredientEntry[] = [];
-  ingredients: Ingredient[] = [{
+  ingredients: Ingredient[] = [];
-    id: 1,
+
-    name: 'Paprika',
+  getIngredient(n: number): Ingredient {
-  }];
+    return this.ingredients.find(v => v.id === n)!
+  }
 
   #recipeId: number = -1;
   @Input()
@@ -39,7 +44,9 @@ export class RecipeAddComponent {
     });
   }
 
-  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();
+  }
 
   onSubmit(): void {
     if (this.createForm.invalid) {
@@ -62,13 +69,19 @@ export class RecipeAddComponent {
 
   onAddIngredient(): void {
     const value = this.createForm.value;
+    console.log(value);
+
     if (!value.selectedIngredient) {
       return;
     }
     const id = parseInt(value.selectedIngredient!);
     if (this.ingredientEntries.find((ingredient) => ingredient.idIngredient === id)) {
+      console.log("oh");
       return;
     }
+    console.log("ah");
+    console.log(this.ingredients.find(v => v.id === id)?.name)
+    console.log(this.ingredients);
     this.ingredientEntries.push({
       idIngredient: id,
       idRecipe: -1,

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 {