Anglar6 tutorial

é
Angular
© Gérald Abbadie 2018
Dans cet exemple, nous trions une liste 'select' de pays en utilisant la valeur d'un champ input
comme chaîne de tri.
Pour cet exemple nous avons créé un Pipe personnalisé :
ng generate pipe TriTableauPipe
...qui nous donnera un fichier de ce type, à peine modifié depuis la base générée :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'triTableau'
})
export class TriTableauPipe implements PipeTransform {
public transform(values: any[], filter: string): any[] {
if (!values || !values.length) return [];
if (!filter) return values;
return values.filter(v => v.toLowerCase().indexOf(filter.toLowerCase()) >=
0);
}
}
Dans ce exemple, nous créons une classe avec un décorateur de Pipe. Ce décorateur reçoit une
chaine 'name' qui permet d'identifier le Pipe dans le HTML. C'est le nom que nous utilisons
dans la boucle HTML.
La classe TriTableauPipe utilise la méthode Transforme de la classe PipeTransform pour renvoyer
des valeurs :
s'il n'y a pas de valeurs insérées, le filtre renvoie un tableau vide :
if (!values || !values.length) return [];
si le Pipe ne reçoit pas de filtre (une chaîne de caractère), il renvoie toutes les valeurs :
if (!filter) return values;
Enfin, dans tous les autres cas, il renvoie un tableau en appliquant un filtre, ici, un test de présence
de chaîne (indexOf) dans une boucle sur le tableau des valeurs (values.filter).
return values.filter(v => v.toLowerCase().indexOf(filter.toLowerCase()) >=
0);
Ainsi, dans cet exemple, le Pipe reçoit la tableau des pays du 'select' en argument 'values' et
utilise la valeur du champ de l'input comme filtre (une chaîne de caractères). Nous verrons
plus loin comment utiliser ngModel pour relier une valeur de composant à des champs de
formulaire.
37