Merge + quantité d'un ingrédient dans une recette

src/app/recipe/recipe.component.html

@@ -2,26 +2,30 @@
   <mat-card class="example-card" appearance="outlined">
     <mat-card-header>
       <mat-card-title-group>
-        <mat-card-title>{{ recipe.name }}</mat-card-title>
-        <mat-card-subtitle>{{ recipe.description }}</mat-card-subtitle>
+        <mat-card-title>Name : {{ recipe.name }}</mat-card-title>
+        <mat-card-subtitle class="description">Description :</mat-card-subtitle>
+        <mat-card-subtitle class="description">
+          <span [innerHTML]="formattedDescription"></span>
+        </mat-card-subtitle>
+      </mat-card-title-group>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-card-subtitle>Image :</mat-card-subtitle>
       <img
         mat-card-xl-image
         *ngIf="recipe.image; else placeholder"
         [src]="recipe.image"
         alt="{{ recipe.name }}"
-          style="max-width: 500px; max-height: 500px"
+        class="recipe-image"
       />
       <ng-template #placeholder>
         <img
           mat-card-xl-image
           src="https://placehold.co/500x500"
           alt="Placeholder Image"
-            style="max-width: 500px; max-height: 500px"
+          class="recipe-image"
         />
       </ng-template>
-      </mat-card-title-group>
-    </mat-card-header>
-    <mat-card-content>
       <h2>Ingredients</h2>
       <ul>
         <li *ngFor="let ingredient of recipe.ingredients">

src/app/recipe/recipe.component.scss

@@ -2,3 +2,15 @@
   max-width: 600px;
   margin-bottom: 8px;
 }
+
+.description {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.recipe-image {
+  max-width: 500px;
+  max-height: 500px;
+  display: block;
+  margin: 8px 0;
+}

src/app/recipe/recipe.component.ts

@@ -17,6 +17,7 @@ import { MatCardModule } from '@angular/material/card';
 export class RecipeComponent implements OnInit {
   recipe: Recipe | undefined;
   ingredientRecipes: IngredientRecipe[] = [];
+  formattedDescription: string = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -31,6 +32,9 @@ export class RecipeComponent implements OnInit {
 
     if (this.recipe) {
       this.ingredientRecipes = this.recipeService.getIngredientRecipes(this.recipe.id);
+      this.formattedDescription = this.formatDescription(
+        this.recipe.description
+      );
     }
   }
 
@@ -41,4 +45,8 @@ export class RecipeComponent implements OnInit {
   navBack(): void {
     window.history.back();
   }
+
+  formatDescription(description: string): string {
+    return description.replace(/(.{50})/g, '$1<br/>');
+  }
 }