Multi-filtre angulaire

Aujourd'hui, je veux partager comment nous pouvons créer un multi-filtre sur Angular. Nous examinerons deux manières pour que les fonctions avec l'événement de clic et les tuyaux. Tout d'abord, nous devons comprendre pourquoi nous avons besoin de filtres.
Nous pouvons collecter nos données dans des fichiers statiques ou les extraire d'une API. Chacune de ces données aura probablement des objets à l'intérieur d'un tableau. Nous pouvons être amenés à filtrer ces données en fonction de différentes propriétés. Pour cette raison, nous utilisons une structure multifiltre.

Nous allons créer un projet de base et utiliser une structure multi-filtres pour illustrer. Imaginez un tableau contenant de nombreux objets et chaque objet inclut les propriétés de plusieurs. Par exemple,

Et maintenant, nous pouvons créer notre fichier HTML. Nous avons utilisé ngModel pour la liaison de données bidirectionnelle. Par conséquent, nous pouvons atteindre les valeurs d'entrée dans le fichier ts.

Nous avons créé des états et des fonctions pour le fichier HTML. Nous devons donc définir ces états et fonctions dans le fichier ts.

C'est tout!

Nous avons créé un projet de base. Vous pouvez le développer en utilisant des méthodes de chaîne ou différentes options de filtre comme les cases à cocher.

Au plaisir de vous voir dans le prochain article!