Les Pipes

Close Up Photo of Programming of Codes

Le principe d’un pipe est de prendre en entrée une donnée et de la transformer comme vous le désirez dans le but de l’afficher à l’utilisateur. Un exempale courant d’utilisation des pipes est le formatage des dates. Si vous devez afficher un objet Date dans votre template en utilisant l’interpolation, vous allez voir s’afficher un simple toString() de votre objet. En utilisant le pipe date, la date sera affichée de manière plus agréable pour un humain… américain. Le pipe date prend en entrée notre objet Date et applique un formatage pour en extraire une chaine de caractères.

import {Component} from ‘@angular/core’;
@Component({
selector: ‘pipe’,
template: `
<h1>Les pipes</h1>
<hr />
<p>{{maDate}}</p>
<p>{{maDate | date}}</p>
`
})
export class PipeComponent {
maDate:Date=new Date(‘2016-09-25’);
}

view rawpipe.component.ts hosted with ❤ by GitHub

Cela nous donne le résultat suivant :

Les pipes


Sun Sep 25 2016 02:00:00 GMT+0200 (CEST)

Sep 25, 2016

Passer des paramètres à votre pipe

Il est possible de passer en paramètre de ce pipe le format de la date. Dans notre cas, une date au format 25 sep 2016 serait plus appropriée ! La documentation de l’API Angular de ce pipe vous expliquera les différents paramétrages possibles. Dans notre cas, nous pouvons écrire ceci :

import {Component} from ‘@angular/core’;
@Component({
selector: ‘pipe’,
template: `
<h1>Les pipes</h1>
<hr />
<p>{{maDate}}</p>
<p>{{maDate | date:’d MMM y’}}</p>
`
})
export class PipeComponent {
maDate:Date=new Date(‘2016-09-25’);
}

view rawpipe.component.ts hosted with ❤ by GitHub

Pour le résultat suivant : 

Les pipes


Sun Sep 25 2016 02:00:00 GMT+0200 (CEST)

25 Sep 2016

Vous devez utiliser le ‘:’ pour passer des paramètres à votre pipe. Il est possible de passer plusieurs paramètres sur certains pipe. Dans ce cas, vous séparerez chaque paramètre par un ‘:’. 

 

Chaînage de pipe

Il est également possible de chaîner vos pipes. Par exemple, si nous voulons que la date soit au format français et en majuscule, nous allons utiliser le pipe upperCase comme ceci :

import {Component} from ‘@angular/core’;
@Component({
selector: ‘pipe’,
template: `
<h1>Les pipes</h1>
<hr />
<p>{{maDate}}</p>
<p>{{maDate | date:’d MMM y’}}</p>
<p>{{maDate | date:’d MMM y’ | uppercase}}</p>
`
})
export class PipeComponent {
maDate:Date=new Date(‘2016-09-25’);
}

view rawpipe.component.ts hosted with ❤ by GitHub

Voici le résultat :

Les pipes


Sun Sep 25 2016 02:00:00 GMT+0200 (CEST)

25 Sep 2016

25 SEP 2016

Finalement un pipe est juste une classe possédant une fonction qui prendra en paramètre un objet / valeur ainsi que des paramètres de transformation, pour le transformer en un autre objet / valeur. 

Angular propose de nombreux pipes en standard pour gérer les dates, les monnaies, l’internationalisation, la casse des caractères, les nombres … Vous poulez les consulter dans l’API à cette adresse

Les pipes et la notion de Change Detection

Angular utilise un mécanisme appelé Change Detection (CD pour les intimes) pour réaliser le data binding entre les données et les valeurs affichées. Ce mécanisme est lancé à chaque évènement javascript tel que la frappe sur une touche, un click, et tout autre évènement asynchone. Nous n’allons pas rentrer dans les détails mais il faut garder à l’esprit que cela peut être très coûteux. Ainsi, les algorithmes de Change Detection s’efforcent d’être le moins coûteux possible. Une des astuces utilisées pour réduire la durée de traitement est d’appliquer une mise à jour du DOM uniquement lorsqu’une donnée à traiter par le pipe change de référence. Cela veut dire que le DOM sera mis à jour uniquement si le CD a affaire à une variable de type primitif (string, number, boolean, Symbol) dite immutable. Si nous traitons un objet dit mutable, le CD ne lancera pas le rendu, le pipe ne sera donc pas réexécuté et votre donnée ne sera pas réformatée. Le mécanisme de Change Detection peut donc produire des effets qui peuvent paraître étonnants au début. Il faut juste garder à l’esprit qu’un changement d’une variable du modèle n’impliquera pas forcement la ré-exécution du pipe modifiant cette variable.

Une astuce pour palier à cet effet indésirable est de recréer l’objet à chaque modification de celui-ci. Des APIS tel que immutable.js font ce travail très bien. 

Cette astuce a cependant l’inconvéniant de rendre votre component quelque peu lié à votre HTML, ou du moins les pipes. C’est pour cette raison que la notion de pipe pure et impure existe.
 

pipe

La suite de cet article est disponible dans le livre Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes.

Laisser un commentaire