Qu'est-ce que les pipes dans Angular ?

Question

Accepted Answer

**Pipes** transforment les données **pour l'affichage** directement dans les templates, en utilisant l'opérateur `|`. Ils vous permettent de formater les valeurs (dates, devises, texte) sans modifier les données sous-jacentes ni écrire la logique de transformation dans le composant. ## Utiliser les pipes intégrés ```html

``` La valeur à gauche est transmise via le pipe ; les arguments suivent deux-points (`date:'longDate'`). ## Chaîner les pipes ```html

``` ## Le pipe async — un incontournable ```html

``` `async` est particulièrement important : il s'abonne à un Observable (par ex. un résultat HTTP), affiche la valeur émise, et se **désabonne automatiquement** lorsque le composant est détruit — évitant les fuites mémoire sans gestion manuelle des abonnements. ## Créer un pipe personnalisé ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // usage: {{ longText | truncate:50 }} ``` ## Pipes purs vs impurs ```text Pure (default): re-runs only when the input REFERENCE changes → efficient (cached) Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering) ``` Les pipes purs sont mis en cache et ne se recalculent que lorsque leurs entrées changent — les rendant performants. ## Pourquoi c'est important Les pipes conservent le formatage des données de manière déclarative et dans le template où il appartient, séparé de la logique du composant — réutilisable, chaînable, et (lorsque pur) efficace. Les pipes intégrés couvrent le formatage courant, les pipes personnalisés gèrent les transformations spécifiques à l'application, et le pipe `async` est la manière idiomatique et sans fuites mémoire d'afficher les données Observable — un motif que vous utiliserez constamment dans Angular.