Angular : 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

H & H: Research and Training 1 / 16

 Plan

1 Définition

2 Création d’un nouveau pipe

H & H: Research and Training 2 / 16

 Définition

Angular

Pipe

I ©
a le rôle de formater et modifier l’affichage d’une donnée dans le
H
.component.html
UEL
O
f E LM
est une classe décorée par le décorateur @pipe

ch r e
doit implémenter la méthode transform(value: any,

©A
args?: any) de l’interface PipeTransform
peut prendre un ou plusieurs paramètres

H & H: Research and Training 3 / 16

 Définition

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

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 4 / 16

 Définition

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

H I ©
(dL
Certains pipes peuvent prendre des paramètresE
O U éclarer maDate =
Date.now(); dans component.ts
L M
{{ maDate | date:’d MMM
r e E
f -->
y’ }}
<!-- affiche 19 oct
c h 2018
©A

H & H: Research and Training 4 / 16

 Définition

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

H I ©
(dL
Certains pipes peuvent prendre des paramètresE
O U éclarer maDate =
Date.now(); dans component.ts
L M
{{ maDate | date:’d MMM
r e E
f -->
y’ }}
<!-- affiche 19 oct
c h 2018
©A
Il est possible d’enchaı̂ner les pipes
{{ maDate | date:’d MMM y’ | uppercase }}
<!-- affiche 19 OCT 2018 -->

H & H: Research and Training 4 / 16

 Définition

Angular

Considérons l’objet suivant défini dans un .component.ts)

personne: Personne = new Personne(100, ’Wick’, ’John
’);
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 16

 Définition

Angular

Considérons l’objet suivant défini dans un .component.ts)

personne: Personne = new Personne(100, ’Wick’, ’John
’);
H I ©
EL
M OU
E Lsur des objets
Avec *ngFor, on ne peut itérer
f
chr e
<ul>
<li *©
A
ngFor="let elt of personne">
</li>
</ul>

H & H: Research and Training 5 / 16

 Définition

Angular

Depuis Angular 6, un pipe keyvalue a été introduit pour pouvoir

itérer sur un objet
H I ©
<ul>
UEL
O
f
{{ elt.key }} : {{ elt.value }}E LM
<li *ngFor="let elt of personne | keyvalue">

</li>
ch r e
</ul>
©A

H & H: Research and Training 6 / 16

 Création d’un nouveau pipe

Angular

Les pipes H I ©
UEL
pipes prédéfinis comme uppercase, lowercase... O
f E LM
pipes personnalisés
ch r e
©A

H & H: Research and Training 7 / 16

 Création d’un nouveau pipe

Angular

Pour créer un pipe

ng generate pipe pipe-name

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 8 / 16

 Création d’un nouveau pipe

Angular

Pour créer un pipe

ng generate pipe pipe-name

H I ©
UEL
O
LM
Ou le raccourci
ng g p pipe-name
r e f E
ch
©A

H & H: Research and Training 8 / 16

 Création d’un nouveau pipe

Angular

Pour créer un pipe

ng generate pipe pipe-name

H I ©
UEL
O
LM
Ou le raccourci
ng g p pipe-name
r e f E
ch
©A
Pour créer un pipe sans le fichier de test
ng g p pipe-name --skip-tests=true

H & H: Research and Training 8 / 16

 Création d’un nouveau pipe

Angular

Exemple : pour créer un nouveau pipe (get-char) qui retourne la

première lettre d’une chaı̂ne de caractères
H I ©
ng g p get-char --skip-tests=true
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 9 / 16

 Création d’un nouveau pipe

Angular

Exemple : pour créer un nouveau pipe (get-char) qui retourne la

première lettre d’une chaı̂ne de caractères
H I ©
ng g p get-char --skip-tests=true
UEL
O
f E LM
Pour une meilleure h r e
cstructuration, plaçons le pipe dans un
© A
répertoire pipes
ng g p pipes/get-char --skip-tests=true

H & H: Research and Training 9 / 16

 Création d’un nouveau pipe

Angular

Constats
H I ©
EL
Un fichier créé : get-char.pipe.ts
M OU
: dL
Une mise à jour effectuéeE éclaration du pipe dans
app.module.tshref
c
©A

H & H: Research and Training 10 / 16

 Création d’un nouveau pipe

Angular

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

@Pipe({
H I ©
name: ’getChar’
UEL
})
O
export class GetCharPipe implements PipeTransform {
f E LM
r e
ch any, ...args: any[]): any {
©
return A
transform(value:
null;
}

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

H & H: Research and Training 11 / 16

 Création d’un nouveau pipe

Angular

Modifions get-char.pipe.ts pour retourner la première lettre

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

@Pipe({
H I ©
name: ’getChar’
UEL
}) O
E
export class GetCharPipe implements PipeTransform {
f LM
r e
ch any, ...args: any[]): any {
A
transform(value:
©value[0];
return
}

H & H: Research and Training 12 / 16

 Création d’un nouveau pipe

Angular

Pour tester, écrire dans un .component.html

{{ "bonjour" | getChar }}
H I ©
EL
<!-- affiche b -->

O U
{{ "wick" | getChar }}
f E LM
<!-- affiche w -->
ch r e
©A
{{ "john" | getChar }}
<!-- affiche j -->

H & H: Research and Training 13 / 16

 Création d’un nouveau pipe

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

@Pipe({
H I ©
name: ’getChar’
UEL
O
LM
})

r e f E
export class getCharPipe implements PipeTransform {

A ch string, ...args: number[]):

transform(value:
© {
unknown
if (args[0] && args[0] < value.length) {
return value[args[0]];
}
return value[0];
}
H & H: Research and Training 14 / 16
 Création d’un nouveau pipe

Angular

Pour tester, écrire dans un .component.html

{{ "bonjour" | getChar:2 }}
H I ©
EL
<!-- affiche n -->

O U
{{ "wick" | getChar:6 }}
f E LM
<!-- affiche w -->
ch r e
©A
{{ "john" | getChar }}
<!-- affiche j -->

H & H: Research and Training 15 / 16

 Création d’un nouveau pipe

Angular

Exercice

H I ©
EL
Créer un pipe sub-array qui permet de retourner un sous tableau à

OU
partir d’un tableau selon les deux indices passés en paramètres :
M
E Lil retourne le tableau entier.
si aucun indice n’est présent,
f
e
hrprésent, on retourne le sous-tableau qui
cest
commence
A
si un seul indice
© de cet indice jusqu’à la fin.

H & H: Research and Training 16 / 16