correctif affichage recette unique

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-title>Name : {{ recipe.name }}</mat-card-title>
-        <mat-card-subtitle>{{ recipe.description }}</mat-card-subtitle>
+        <mat-card-subtitle class="description">Description :</mat-card-subtitle>
-        <img
+        <mat-card-subtitle class="description">
-          mat-card-xl-image
+          <span [innerHTML]="formattedDescription"></span>
-          *ngIf="recipe.image; else placeholder"
+        </mat-card-subtitle>
-          [src]="recipe.image"
-          alt="{{ recipe.name }}"
-          style="max-width: 500px; max-height: 500px"
-        />
-        <ng-template #placeholder>
-          <img
-            mat-card-xl-image
-            src="https://placehold.co/500x500"
-            alt="Placeholder Image"
-            style="max-width: 500px; max-height: 500px"
-          />
-        </ng-template>
       </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 }}"
+        class="recipe-image"
+      />
+      <ng-template #placeholder>
+        <img
+          mat-card-xl-image
+          src="https://placehold.co/500x500"
+          alt="Placeholder Image"
+          class="recipe-image"
+        />
+      </ng-template>
       <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

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