Pipes

Les pipes sont des fonctions qui servent à transformer des données dans les templates. En général, les pipes sont des fonctions « pures », sans effets de bord. Angular propose de nombreux pipes intégrés utiles que vous pouvez importer et utiliser dans vos composants. Vous pouvez aussi créer un pipe personnalisé.

Dans cette activité, vous allez importer un pipe et l'utiliser dans le template.

Pour utiliser un pipe dans un template, incluez-le dans une expression interpolée. Regardez cet exemple :

import {UpperCasePipe} from '@angular/common';

@Component({
  ...
  template: `{{ loudMessage | uppercase }}`,
  imports: [UpperCasePipe],
})
export class App {
  loudMessage = 'we think you are doing great!'
}

À votre tour d'essayer :

1. Importer le pipe LowerCase

   Commencez par mettre à jour app.ts en ajoutant, au niveau du fichier, l'import de LowerCasePipe depuis @angular/common.

   import {LowerCasePipe} from '@angular/common';

2. Ajouter le pipe aux imports du template

   Ensuite, mettez à jour les imports du décorateur @Component() pour y inclure une référence à LowerCasePipe.

   @Component({
     ...
     imports: [LowerCasePipe]
   })

3. Ajouter le pipe au template

   Enfin, dans app.ts, mettez à jour le template pour y inclure le pipe lowercase :

   template: `{{ username | lowercase }}`

Les pipes peuvent aussi accepter des paramètres, qui permettent de configurer leur sortie. Vous en saurez plus dans la prochaine activité.

P.-S. : vous vous en sortez très bien ⭐️