Créer un filtre de recherche dans Angular

1. le filtre de recherche Angular
2. Étapes pour créer un filtre de recherche dans Angular
3. Avantages du filtre de recherche personnalisé

Cet article montrera comment utiliser le package ng2-search-filter et la directive de boucle ngfor pour créer un filtre de recherche dans un projet Angular afin de filtrer les données collectées.

le filtre de recherche Angular

Le framework Angular comprend de nombreuses fonctionnalités qui peuvent créer diverses applications. L’une de ces fonctionnalités est la possibilité d’utiliser des pipes, qui sont des filtres qui peuvent être appliqués aux données avant qu’elles ne soient affichées à l’écran.

Le filtre de recherche Angular fournit un moyen déclaratif de filtrer les données lorsqu’elles entrent ou sortent de la portée d’un contrôleur. Le filtre peut être appliqué à n’importe quel objet de données : chaînes, tableaux, objets ou même primitives.

Les filtres sont exécutés de gauche à droite jusqu’à ce que l’un d’entre eux renvoie true, ou que tous aient été exécutés sans renvoyer true. La meilleure approche pour construire une recherche personnalisée dans Angular consiste à utiliser le package ng2-search-filter plutôt que d’utiliser une bibliothèque tierce.

Étapes pour créer un filtre de recherche dans Angular

Cette section présente les étapes nécessaires à la création d’un filtre de recherche dans Angular.

Installer la CLI Angular

Tout d’abord, installez l’outil CLI Angular, qui est utilisé pour développer des applications Angular. Exécutez cette commande pour installer Angular CLI.

npm install @angular/cli

Installez le paquet ng2-search-filter

La deuxième et la plus importante étape consiste à installer le package ng2-search-filter.

npm i ng2-search-filter

Le ng2-search-filter fournit un composant d’entrée de recherche pour les applications Angular. Il permet à l’utilisateur de filtrer une liste d’éléments en tapant dans la zone de saisie.

Le composant est hautement configurable et prend en charge de nombreuses sources de données différentes.

Importer les modules

La troisième étape consiste à importer le FormsModule et Ng2SearchPipeModule dans la classe App Module. Parce que si vous voulez créer un formulaire de recherche pour votre site Web, vous devrez importer les deux modules.

Écrivez le code suivant dans votre application Angular.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
@NgModule({
    imports:      [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Écrire le code TypeScript et HTML

Cette étape déterminera à quoi ressemblera votre filtre de recherche. Nous allons écrire du code TypeScript et HTML.

Code TypeScript :

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css']
})
export class AppComponent {
    searchText: any;
    names = [
        { country: 'Adil'},
        { country: 'John'},
        { country: 'Jinku'},
        { country: 'Steve'},
        { country: 'Sam'},
        { country: 'Zeed'},
        { country: 'Abraham'},
        { country: 'Heldon'}
    ];
}

Code HTML:

 <h1>Example of Angular Search Filter</h1>
<div class="container">
    <div class="search-name">
        <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="on" placeholder=" SEARCH  ">
    </div>
    <ul *ngFor="let name of names | filter:searchText">
        <li>
            <span>{{name.country}}</span>
        </li>
    </ul>
</div>

Dans cet exemple, nous avons écrit des noms aléatoires, et à l’aide des boucles ng2-search-filter et ng-for, nous avons pu filtrer les données par recherche.

Avantages du filtre de recherche personnalisé

Nous avons appris toutes les étapes pour créer un filtre de recherche dans Angular. Examinons les avantages de la création d’un filtre de recherche personnalisé à l’aide du package ng2-search-filter.

1. Il est facile à utiliser et à personnaliser en fonction des besoins de l’application.
2. Il s’agit d’un composant de base Angular qui offre flexibilité et précision.
3. Le filtre de recherche peut être utilisé avec toutes les données, pas seulement les chaînes.

Cliquez ici pour voir la démonstration en direct de toutes les étapes ci-dessus.