diff --git a/src/app/components/recipe-mini/recipe-mini.component.html b/src/app/components/recipe-mini/recipe-mini.component.html index e19fd41..aff3d97 100644 --- a/src/app/components/recipe-mini/recipe-mini.component.html +++ b/src/app/components/recipe-mini/recipe-mini.component.html @@ -1,11 +1,11 @@
{{recipe.name}} + alt="{{ recipe.name }}">
-

{{recipe.name}}

-

{{recipe.description}}

+

{{ recipe.name }}

+

{{ recipe.description | truncate:50:false }}

Voir la recette
\ No newline at end of file diff --git a/src/app/components/recipe-mini/recipe-mini.component.ts b/src/app/components/recipe-mini/recipe-mini.component.ts index 09aa671..2e62dcc 100644 --- a/src/app/components/recipe-mini/recipe-mini.component.ts +++ b/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' }) diff --git a/src/app/pipes/truncate.pipe.spec.ts b/src/app/pipes/truncate.pipe.spec.ts new file mode 100644 index 0000000..b16f3ef --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/pipes/truncate.pipe.ts b/src/app/pipes/truncate.pipe.ts new file mode 100644 index 0000000..1086916 --- /dev/null +++ b/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}`; + } + +} +