20. Création de Pipes personnalisés

Bien qu'Angular offre de nombreux pipes intégrés, vous avez souvent besoin d'une logique personnalisée pour transformer des données spécifiques aux besoins de votre application (ex: convertir un code de statut en libellé lisible, ou calculer des taxes).

Étapes pour créer un Pipe personnalisé

1. Générer : Utilisez le CLI : ng generate pipe status-label (ou ng g p status-label).
2. Implémenter PipeTransform : La classe du pipe générée doit implémenter l'interface PipeTransform et la méthode transform.
3. Définir la logique : Implémentez votre logique de transformation à l'intérieur de la méthode transform.

Exemple : Status Label Pipe

Ce pipe convertit un code de statut numérique en un libellé textuel lisible.

typescript import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'statusLabel' // Le nom utilisé dans le template }) export class StatusLabelPipe implements PipeTransform {

transform(value: number, language: string = 'en'): string { switch (value) { case 1: return language === 'fr' ? 'Actif' : 'Active'; case 2: return language === 'fr' ? 'En attente' : 'Pending'; default: return 'Statut inconnu'; } } }

Utilisation dans le template

Composant : currentStatus: number = 2;

html

Statut (EN) : {{ currentStatus | statusLabel }}

Statut (FR) : {{ currentStatus | statusLabel:'fr' }}

Note sur la pureté : Par défaut, les pipes sont purs (pure), ce qui signifie qu'ils ne sont recalculés que si la valeur d'entrée elle-même change (changement de primitive) ou si la référence de l'objet change. C'est très performant. Si vous avez besoin qu'il soit recalculé à chaque cycle de détection de changement, vous pouvez définir pure: false dans le décorateur @Pipe, mais cela est rarement recommandé.