Pipes dans Angular sont des fonctions simples utilisées pour transformer des données dans des modèles sans modifier les données sous-jacentes. Les tuyaux prennent une valeur, la traitent et renvoient une sortie formatée ou transformée. Ils sont souvent utilisés pour formater des dates, des nombres, des chaînes et même des tableaux ou des objets.

Ils vous permettent de formater et d'afficher les données dans un format plus lisible ou pertinent directement dans la vue sans altérer le modèle de données sous-jacent.

L'utilisation de pipes aide à garder le code propre et lisible. Au lieu d'écrire une logique complexe dans les modèles ou les composants, vous pouvez encapsuler cette logique dans un pipe, qui peut ensuite être réutilisé dans différentes parties de votre application.
Par exemple, si vous développez une plateforme de blog où les utilisateurs peuvent voir la date de publication des articles. Les dates doivent être affichées dans un format convivial, tel que « 31 août 2024 », au lieu du format brut « 2024-08-31T14:48:00.000Z ». Avec pipes, vous pouvez utiliser le DatePipe intégré d'Angular dans le modèle au lieu de formater manuellement la date dans le composant, encombrant le code et réduisant la lisibilité.

Published on: {{ article.publishDate | date:'longDate' }}

Pour appliquer un canal, utilisez l'opérateur pipe (|) dans une expression de modèle, comme indiqué dans l'exemple de code ci-dessus.

Tuyaux intégrés

Angular est livré avec plusieurs canaux intégrés qui couvrent les tâches courantes (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, etc.). Savoir comment les utiliser peut rendre votre code plus propre et plus efficace.

Exemples :

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

Tuyaux paramétrés

De nombreux pipes acceptent des paramètres pour personnaliser leur comportement.

Pour spécifier le paramètre, faites suivre le nom du canal avec un deux-points (:) et la valeur du paramètre

Certains canaux acceptent plusieurs paramètres, séparés par des deux-points supplémentaires.

Les paramètres peuvent être facultatifs ou obligatoires. Supposons que vous disposiez d'un canal personnalisé qui formate la devise et vous oblige à spécifier le type de devise en tant que paramètre. Si ce paramètre n'est pas fourni, le canal ne pourra peut-être pas formater la valeur correctement.

The product price is {{ price | customCurrency:'USD' }}

1. DatePipe avec paramètres

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

Ceci formate la date comme « 31 août 2024, 14:48:00 ».

2. CurrencyPipe avec paramètres

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

Le prix est alors formaté sous la forme « 1 235 € » (arrondi sans décimale).

Tuyaux de chaînage

Vous pouvez enchaîner plusieurs tuyaux pour réaliser des transformations complexes.

{{ article.content | slice:0:100 | uppercase }}

Cela découpera les 100 premiers caractères de article.content et les convertira en majuscules.

Tuyaux personnalisés

Parfois, les canaux intégrés peuvent ne pas répondre à vos besoins spécifiques et vous devrez créer un canal personnalisé pour gérer la logique spécifique. Voici comment procéder.

Exemple:

Dans l'exemple suivant, nous allons créer un tube qui ajoute un message d'accueil à un nom comme « Bonjour, Alice ! »

Exécutez la commande suivante pour générer un nouveau canal :

ng generate pipe greet

Maintenant, modifions le fichier greet.pipe.ts dans le répertoire src/app pour inclure la logique du canal :

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

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Une fois votre pipe prête, vous pouvez l'utiliser dans vos modèles.

{{ 'Alice' | greet }}

Création d'un canal personnalisé paramétré

Nous allons maintenant rendre le message d'accueil personnalisable, afin que vous puissiez dire "Salut, Alice !" ou "Bienvenue, Alice!" en fonction de ce que vous transmettez au tuyau.

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

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

La méthode de transformation a désormais un deuxième paramètre, salutation. Si aucun message d'accueil n'est fourni, la valeur par défaut est « Bonjour ».

Vous pouvez désormais personnaliser le message d'accueil dans vos modèles.

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

Tuyaux purs ou impurs

1. Pipes pures
Par défaut, tous les tuyaux angulaires sont purs. Un pipe pur n'est appelé que lorsque des données d'entrée (comme un nombre ou une chaîne) ou lorsque la référence à un objet (comme un tableau ou une date) change. Cela rend les tuyaux purs efficaces et performants car le tuyau ne fonctionne pas inutilement.

Cependant, si vos données sont plus complexes, comme un tableau d'éléments, Angular peut ne pas remarquer les changements à l'intérieur du tableau (comme l'ajout d'un nouvel élément) car la référence au tableau n'a pas changé.

Sauf si nécessaire, gardez vos tuyaux purs pour éviter les rendus inutiles et maintenir les performances.

Exemple:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

Dans votre modèle :

• {{ item.name }} - {{ item.price | formatPrice }}

Si vous ajoutez un nouvel article au tableau items en vente, vous pouvez vous attendre à ce qu'il apparaisse dans la liste. Mais si vous insérez simplement le nouvel élément dans le tableau, la liste risque de ne pas se mettre à jour car la référence du tableau n'a pas changé.

2. Tuyaux impurs

Un tube impur, en revanche, est appelé chaque fois qu'Angular effectue un cycle de détection de changement. Cependant, comme ils s'exécutent très souvent, ils peuvent ralentir votre application.

Exemple:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

Dans votre modèle :

• {{ item.name }} - {{ item.price | formatPrice }}

Maintenant, lorsque vous ajoutez un nouvel élément, le canal remarquera le changement et mettra à jour la liste.

Meilleures pratiques d'utilisation des tuyaux

1. Gardez les tuyaux simples. Évitez les calculs lourds dans les tuyaux

2. Nommer les tuyaux de manière claire et descriptive

3. Gardez les tuyaux concentrés sur une seule responsabilité

4. Évitez les tuyaux impurs lorsque cela est possible

5. Tester minutieusement les canaux personnalisés

Conclusion

Angular pipes rationalisent les tâches de transformation des données, rendant votre code plus modulaire, réutilisable et maintenable. Ils contribuent à garantir la cohérence dans l'application et à améliorer la lisibilité de vos modèles, ce qui est crucial pour développer des applications évolutives et maintenables.