Angular 5 / 6 : pipe

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

elmouelhi.achref@gmail.com

12-13 Avril 2018, POE m2i 1 / 12

 Plan

1 Définition

2 Création d’un nouveau pipe

12-13 Avril 2018, POE m2i 2 / 12

 Définition

Angular

Définition : Un pipe

a le rôle de modifier une donnée dans le .component.html

est une classe décorée par le décorateur @pipe
implémente la méthode transform(value: any, args?:
any) de l’interface PipeTransform
peut prendre des paramètres

12-13 Avril 2018, POE m2i 3 / 12

 Définition

Angular
Exemple
{{ "bonjour" | uppercase }}
<!-- BONJOUR -->

12-13 Avril 2018, POE m2i 4 / 12

 Définition

Angular
Exemple
{{ "bonjour" | uppercase }}
<!-- BONJOUR -->

Certains pipes peuvent prendre des paramètres

{{ maDate | date:’d MMM y’ }}
<!-- affiche 19 oct 2018 -->

12-13 Avril 2018, POE m2i 4 / 12

 Définition

Angular
Exemple
{{ "bonjour" | uppercase }}
<!-- BONJOUR -->

Certains pipes peuvent prendre des paramètres

{{ maDate | date:’d MMM y’ }}
<!-- affiche 19 oct 2018 -->

Il est possible de chaı̂ner les pipes

{{ maDate | date:’d MMM y’ | uppercase }}
<!-- affiche 19 OCT 2018 -->

12-13 Avril 2018, POE m2i 4 / 12

 Création d’un nouveau pipe

Angular

Les pipes

pipes prédéfinis comme uppercase, lowercase...

pipes personnalisés

12-13 Avril 2018, POE m2i 5 / 12

 Création d’un nouveau pipe

Angular
Pour créer un pipe
ng generate pipe nomPipe

12-13 Avril 2018, POE m2i 6 / 12

 Création d’un nouveau pipe

Angular
Pour créer un pipe
ng generate pipe nomPipe

Exemple : définissons un pipe (getchar qui retourne la première

lettre d’une chaı̂ne de caractères
ng generate pipe getchar

Constat : deux fichiers générés

getchar.pipe.ts
getchar.pipe.spec.ts

+ déclaration du pipe dans app.module.ts

12-13 Avril 2018, POE m2i 6 / 12
 Création d’un nouveau pipe

Angular

Contenu du getchar.pipe.ts
import { Pipe, PipeTransform } from ’@angular/core’;

@Pipe({
name: ’getchar’
})
export class GetcharPipe implements PipeTransform {

transform(value: any, args?: any): any {

return null;
}

value correspond à la valeur de la chaı̂ne qu’on va modifier.

12-13 Avril 2018, POE m2i 7 / 12

 Création d’un nouveau pipe

Angular

Modifions getchar.pipe.ts pour retourner la première lettre

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

@Pipe({
name: ’getchar’
})
export class GetcharPipe implements PipeTransform {

transform(value: any, args?: any): any {

return value[0];
}

12-13 Avril 2018, POE m2i 8 / 12

 Création d’un nouveau pipe

Angular

Pour tester, écrire dans un .component.html

{{ "bonjour" | getchar }}
<!-- affiche b -->

{{ "wick" | getchar }}
<!-- affiche w -->

{{ "john" | getchar }}
<!-- affiche j -->

12-13 Avril 2018, POE m2i 9 / 12

 Création d’un nouveau pipe

Angular
Modifions getchar.pipe.ts pour retourner un caractère à une
position donnée (pos)
import { Pipe, PipeTransform } from ’@angular/core’;

@Pipe({
name: ’getchar’
})
export class GetcharPipe implements PipeTransform {

transform(value: any, pos?: any): any {

if (pos && pos< value.length)
return value[pos];
return value[0];
}

}
12-13 Avril 2018, POE m2i 10 / 12
 Création d’un nouveau pipe

Angular

Pour tester, écrire dans un .component.html

{{ "bonjour" | getchar:2 }}
<!-- affiche n -->

{{ "wick" | getchar:6 }}
<!-- affiche w -->

{{ "john" | getchar }}
<!-- affiche j -->

12-13 Avril 2018, POE m2i 11 / 12

 Création d’un nouveau pipe

Angular

Exercice

Écrire un pipe qui permet de transformer un objet en tableau pour

qu’on puisse l’étirer avec un *ngFor

L’objectif est de pouvoir parcourir un objet comme s’il s’agit d’un

tableau (obj est un objet défini dans .component.ts)
<ul *ngFor="let elt of obj | objtoiterable">
<li>
{{ elt }} : {{ obj[elt] | uppercase }}
</li>
</ul>

12-13 Avril 2018, POE m2i 12 / 12