src/app/components/recipe-mini/recipe-mini.component.html

@@ -1,11 +1,11 @@
 <div class="recipe-card">
   <div class="recipe-image">
     <img [src]="recipe.image" onerror="this.onerror=null;this.src='https://placehold.co/100x100';"
-      alt="{{recipe.name}}">
+      alt="{{ recipe.name }}">
   </div>
   <div class="recipe-details">
-    <h2>{{recipe.name}}</h2>
+    <h2>{{ recipe.name }}</h2>
-    <p>{{recipe.description}}</p>
+    <p>{{ recipe.description | truncate:50:false }}</p>
     <a href="/recipe/{{ recipe.id }}">Voir la recette</a>
   </div>
 </div>

src/app/components/recipe-mini/recipe-mini.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { Recipe } from '../../model/recipe.model';
 import { Input } from '@angular/core';
-
+import { TruncatePipe } from '../../pipes/truncate.pipe';
 
 @Component({
   selector: 'app-recipe-mini',
   standalone: true,
-  imports: [],
+  imports: [TruncatePipe],
   templateUrl: './recipe-mini.component.html',
   styleUrl: './recipe-mini.component.css'
 })

src/app/pipes/truncate.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TruncatePipe } from './truncate.pipe';
+
+describe('TruncatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new TruncatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/truncate.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  standalone: true,
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value: string, limit: number = 50, completeWords: boolean = false, ellipsis: string = '...'): string {
+    if (!value) return '';
+    if (value.length <= limit) return value;
+
+    if (completeWords) {
+      limit = value.substring(0, limit).lastIndexOf(' ');
+    }
+    return `${value.substring(0, limit)}${ellipsis}`;
+  }
+
+}
+