update interface detail recipe

src/app/recipe/recipe.component.html

@@ -1,4 +1,39 @@
-<p>{{recipe.id}}</p>
-<p>{{recipe.name}}</p>
-<p>{{recipe.description}}</p>
+<style>
+ .container {
+	 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 {