Pipes

👨🏻‍🍳 Nos Workshops ✉️Besoin d'aide ?🔍Code Review
Rechercher…
Pipes
Les Pipes sont des filtres utilisables directement depuis la vue afin de transformer les valeurs lors du "binding".
Utilisation des Pipes
Syntaxe
La syntaxe des Pipes est simplement inspirée des Pipes des shell UNIX que l'on retrouve dans de nombreux systèmes de templating.
1
<div>{{ user.firstName | lowercase }}</div>
Copied!
Paramètres
Les Pipes peuvent prendre des paramètres qu'il faut mettre après le Pipe et séparés avec le symbole ":".
1
<div>{{ user.firstName | slice:0:10 }}</div>
Copied!
Chaînage
Les "pipes" peuvent être chaînés.
1
<div>{{ user.firstName | slice:0:10 | lowercase }}</div>
Copied!
Les Pipes natifs
Angular dispose de plusieurs "pipes" natifs : https://angular.io/api?type=pipe.
Le Pipe async
Le Pipe async est un Pipe capable de consommer des Observables (ou Promise) en appelant implicitement la méthode subscribe (ou then) afin de "binder" les valeurs contenus dans l'Observable (ou la Promise).
Dans les cas des Observables, ce Pipe unsubscribe automatiquement à la destruction de la vue.
Cf. Gestion de la Subscription.
Pipes personnalisés
Pour créer un Pipe personnalisé, il faut :
1.
implémenter une classe suivant l'interface PipeTransform,
2.
décorer cette classe avec le décorateur @Pipe() en indiquant le nom du Pipe.
3.
ajouter la classe aux declarations (et exports) du module associé.
Le Pipe price ci-dessous permet d'afficher le prix d'un produit représenté avec la classe Price suivante :
price.ts
1
export class Price {
2
​
3
    coefficient?: number;
4
    exponent?: number;
5
    currency?: string;
6
​
7
    constructor(args: Price = {}) {
8
        this.coefficient = args.coefficient;
9
        this.exponent = args.exponent;
10
        this.currency = args.currency;
11
    }
12
​
13
}
Copied!
price.pipe.ts
1
@Pipe({
2
    name: 'price'
3
})
4
export class PricePipe implements PipeTransform {
5
​
6
    transform(price: Price): string {
7
​
8
        if (price == null) {
9
            return null;
10
        }
11
​
12
        const amount = price.coefficient * Math.pow(10, price.exponent);
13
​
14
        return `${amount} ${price.currency}`;
15
​
16
    }
17
​
18
}
Copied!
price.module.ts
1
@NgModule({
2
    declarations: [
3
        PricePipe
4
    ],
5
    exports: [
6
        PricePipe
7
    ]
8
})
9
export class PriceModule {
10
}
Copied!
Le Pipe peut alors être utilisé dans n'importe quel composant contenu dans un module qui importe le module PriceModule :
book-preview.component.ts
1
export class BookPreviewComponent {
2
    bookPrice = new Price({
3
        coefficient: 1010,
4
        exponent: -2,
5
        currency: 'USD'
6
    });
7
}
Copied!
book-preview.component.html
1
<div>{{ bookPrice | price }}</div>
Copied!
On obtient alors le résultat suivant :
1
<div>10.1 USD</div>
Copied!
"Dependency Injection"
Le constructeur d'un Pipe peut être utiliser pour injecter des dépendances.
Dans notre cas, nous souhaitons injecter le Pipe currency afin de profiter de ses fonctionnalités tout en simplifiant son utilisation.
price.pipe.ts
1
@Pipe({
2
    name: 'price'
3
})
4
export class PricePipe implements PipeTransform {
5
​
6
    constructor(private _currencyPipe: CurrencyPipe) {
7
    }
8
​
9
    transform(price: Price): string {
10
​
11
        if (price == null) {
12
            return null;
13
        }
14
​
15
        const amount = price.coefficient * Math.pow(10, price.exponent);
16
​
17
        return this._currencyPipe.transform(amount, price.currency);
18
​
19
    }
20
​
21
}
Copied!
Malheureusement, Angular ne définit pas nativement de providers pour les Pipes.
En attendant la résolution de ce bug https://github.com/angular/angular/issues/15107, une des solutions de contournement pour injecter un Pipe est de l'ajouter à la liste des providers d'un module importé par le module définissant notre Pipe.
1
/* @HACK: Cf. https://github.com/angular/angular/issues/15107 */
2
@NgModule({
3
    providers: [
4
        CurrencyPipe
5
    ]
6
})
7
export class InjetableCurrencyPipeModule {
8
}
9
​
10
@NgModule({
11
    imports: [
12
        InjetableCurrencyPipeModule
13
    ]
14
})
15
export class BookModule {
16
}
Copied!
Pureté du Pipe
Les Pipes purs
Par défaut, les Pipes sont purs. C'est à dire que leur méthode transform est une fonction pure, la valeur retournée ne dépend que des paramètres reçus et les appels n'ont aucun effet de bord. Autrement dit, le Pipe est "stateless".
Par optimisation, à chaque Change Detection, Angular n'évalue les Pipes purs (i.e. appel de la méthode transform) que quand les paramètres changent.
Angular ne considère que les paramètres ont changé que si leurs références ont changé.
Il faut donc veiller au respect de l'immutabilité.
Les Pipes impurs
Les Pipes impurs sont évalués à chaque Change Detection même quand les paramètres ne changent pas.
Ils sont déclarés en passant la valeur false au paramètre pure du décorateur Pipe :
1
@Pipe({
2
    pure: false
3
})
4
export class BadPipe {
5
}
Copied!
Nativement, seuls les Pipes suivant sont impurs :
async : Il est impur car les valeurs retournées par ce Pipe peuvent changer à n'importe quel moment étant donné qu'elles proviennent d'une source asynchrone (Observable ou Promise). 
json : Etant donné qu'il est principalement utilisé pour le "debug", ce Pipe est impur car il est préférable que la valeur retournée soit mise à jour même si l'immutabilité n'est pas respectée. 
slice : Bien que ce Pipe fonctionnerait parfaitement en étant pur, il est probablement impur pour faciliter l'adoption d'Angular par la communauté car malheureusement l'immutabilité des Arrays est rarement respectée par les développeurs Angular.
Ne les utilisez pas !
L'implémentation de Pipes impurs est un "code smell" qui révèle généralement des problèmes de conception.