Découvrir Angular 2

Créer un filtre pour la recherche

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Julien Moulin vous montre comment mettre en place un pipe personnalisé. Il s'agit de filtrer une liste sur une valeur précise d'un objet.
05:11

Transcription

Je vais vous montrer une pipe personnalisée, qui permet de filtrer. Donc je vais faire un petit champs ici, si je tape Thomas , comme ça, les premières lettres, j'ai Thomas, si je tape Gabrielle, j'ai Gabrielle. Ça me permet de chercher dans le nom de client, une fiche particulière. Vous pouvez le faire pour à peu près tout, ça peut être intéressant, pour le coup, pour créer très rapidement un petit moteur de recherche. On va fonctionner avec une pipe que l'on va créer soi-même. Je vous montre tout ce que j'ai fait pour arriver à ça. D'abord l'idée c'est de créer une pipe personnalisée, que l'on va mettre dans un dossier pipe. Je vous laisse le code à l'écran pour que vous puissiez le recopier, si vous avez besoin de le refaire. Il faut toujours, bien sûr, importer ici, on va le séparer ça peut être bien aussi, pipe et le pipe transform depuis Angular core, parce qu'on va se baser là-dessus. Ensuite vous n'allez pas définir un at composant ; component , mais un at pipe qui va forcément avoir un name. Ici, ce sera item filter, c'est le nom que vous utiliserez, pour filtrer ensuite dans votre template. On va exporter la classe item pipe, qui va implémenter une interface ; Pipe transform , qui est une interface qui permet de définir ce que doit référencer automatiquement un pipe. En fait, c'est une méthode transform qui est obligatoire. Alors, cette méthode transform, pour moi va prendre une valeur et des arguments si on a besoin. Ici, on va filter, donc on va récupérer le premier argument qui sera la valeur passée, et on va lui dire que s'il existe, on va le mettre en lower case, donc, en minuscule. Ensuite on va retourner le filter, que s'il y a quelque chose à filtrer. Sinon, on retrouvera la valeur toute basique et puis, pas de problème. Si on filtre, on passera la valeur qui sera le tableau, ni plus ni moins, dans un filter, et ce filter regardez, il prendra à chaque fois un item, et puis il vérifiera que l'item.name , donc le nom de notre item, mis également en lower case, correspond bien à filter. À ce moment là, effectivement on retournera ça, on retournera ceux qui correspondent aux filtres, sinon on retournera absolument tout, sans aucun problème. Voilà, ça ça définit un filter. Bien sûr, vous pouvez définir vos propres filtres, et travailler n'importe quelle donnée, c'est pas forcément du filtrage complet de collection, mais vous pouvez appliquer des effets, appliquer de l'information, à un pipe particulier. Là ça vous donne la création réelle d'un pipe, et comment un pipe fonctionne. Ce n'est qu'une classe pipe, qui implémente une seule méthode ; la méthode transform. À partir de là ça retourne quelque chose, donc il va bien falloir l'utiliser. Attention au même titre que les sous-composants, ça va s'activer. Où va t-on vouloir notre filtre ? Au niveau de l'itération. L'itération se fait notre notre app point component point ts. Et aussi bien sûr dans notre app point component point HTML . Je vous montre le premier d'abord, ici vous devez référencer votre pipe, comme vous le faites pour les directives. Il y a aussi un paramètre pipe à référencer. Entre crochets vous irez donner le nom du pipe, vous l'avez au-dessus, parce que vous avez fait un import. En tout cas moi je l'ai fait, et vous le ferez aussi. Il faut importer la classe de pipe, pour pouvoir l'utiliser. Une fois qu'elle est référencée comme ça dans le template, ça devient disponible et utilisable, sinon ça ne marchera pas, tout simplement vous aurez un message d'erreur. Dans votre template, comment vous allez vous débrouiller ? Eh bien simplement, on va l'utiliser avec un pipe sur l'itération. On va utiliser notre filtre item filter 2.1, et on va lui donner ici ; list filter point value. Qu'est-ce que list filter point value ? Moi j'ai voulu que ce soit dynamique, et pour que ce soit dynamique, je dois lui donner une valeur. Cette valeur-là, j'ai joué le petit malin, j'ai créé juste au-dessus, un input ici, et je lui ai donner une valeur de NgModel, donc un modèle dynamique, mais qui va être disponible uniquement dans cette template-là. Et pour faire ça, vous utilisez le fameux dièse. Donc j'ai créé une variable temporaire, list filter, qui sera appliquée au input, qui contiendra toutes les informations de notre input, donc on peut récupérer avec .value, la valeur du input, très facilement dans le template. Pour que ce soit réactif, et pour que ça filtre, en live, j'ai câblé dessus, un événement, quand vous appuyez sur une touche, ça va à chaque fois, filtrer et remplacer la valeur de list filter , avec ce qui se trouve à l'intérieur. Ce qu'il faut faire ici, quand vous voulez utiliser cette technique-là, c'est câblé l'événement key up sur la valeur 0, qui correspond au relevé de la touche. Bien sûr, les keys vous en avez plein qui existent, mais le key up correspond exactement à ça, donc on va le câbler comme ça, ça va réagir en direct. Il n'y a pas plus de choses que ça à faire, on définit un filtre, donc une pipe que l'on crée soi-même, on vient la référencer dans le parent qui va l'utiliser, avec notre petit paramètre pipe à qui on va ajouter, vous pouvez en ajouter autant que vous voulez. Et enfin, on vient l'utiliser à l'intérieur. Ça peut être juste filtre, qui va être appliqué pour une data, ou alors ici un filtre de collection, qui va être câblé avec les petites techniques qu'on a vu avant, et un événement qui va déclencher très rapidement le processus. Vous voyez, ce n'est pas compliqué mais, ça va demander un petit peu de création. C'est des sujets que vous devrez pousser après, pour aller un petit peu plus loin.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !