Créer un pipe personnalisé

Vous pouvez créer des pipes personnalisés dans Angular pour répondre à vos besoins de transformation de données.

Dans cette activité, vous allez créer un pipe personnalisé et l'utiliser dans votre template.

Un pipe est une classe TypeScript dotée d'un décorateur @Pipe. Voici un exemple :

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

@Pipe({
  name: 'star',
})
export class StarPipe implements PipeTransform {
  transform(value: string): string {
    return `⭐️ ${value} ⭐️`;
  }
}

Le StarPipe accepte une chaîne de caractères et renvoie cette chaîne entourée d'étoiles. Notez que :

• le nom défini dans la configuration du décorateur @Pipe est celui qui sera utilisé dans le template
• c'est dans la fonction transform que vous placez votre logique

À votre tour d'essayer : vous allez créer le ReversePipe :

1. Créer le ReversePipe

   Dans reverse.pipe.ts, ajoutez le décorateur @Pipe à la classe ReversePipe et fournissez la configuration suivante :

   @Pipe({
     name: 'reverse'
   })

2. Implémenter la fonction transform

   La classe ReversePipe est maintenant un pipe. Mettez à jour la fonction transform pour ajouter la logique d'inversion :

   export class ReversePipe implements PipeTransform {
     transform(value: string): string {
       let reverse = '';
   
       for (let i = value.length - 1; i >= 0; i--) {
         reverse += value[i];
       }
   
       return reverse;
     }
   }

3. Utiliser le ReversePipe dans le template

   Maintenant que la logique du pipe est implémentée, la dernière étape consiste à l'utiliser dans le template. Dans app.ts, incluez le pipe dans le template et ajoutez-le aux imports du composant :

   @Component({
     ...
     template: `Reverse Machine: {{ word | reverse }}`,
     imports: [ReversePipe]
   })

Et voilà, vous y êtes arrivé. Félicitations, vous avez terminé cette activité. Vous savez maintenant utiliser des pipes, et même implémenter vos propres pipes personnalisés.