Référence : https://angular.io/tutorial/first-app/first-app-lesson-13
Nous allons maintenant regarder comment ajouter une fonctionnalité de filtre sur le champ "location" à notre application Angular.
Mise à jour les propriétés du composant home
Dans le fichier src/app/home/home.component.ts
, ajoutons une nouvelle propriété filteredLocationList
à la classe HomeComponent .
Cette propriété va stocker le tableau de maisons à louer après filtre du tableau initial.
filteredLocationList: HousingLocation[] = [];
La propriété filteredLocationList doit contenir l'ensemble total de valeurs d'emplacements de logement par défaut lors du chargement de la page puisque le tableau n'a pas encore été filtré. Mettre donc à jour le constructeur du HomeComponent pour définir la valeur :
constructor() { this.housingLocationList = this.housingService.getAllHousingLocations(); this.filteredLocationList = this.housingLocationList; }
Mise à jour du template du composant home
<input type="text" placeholder="Filter by city" #filter>
L'input était déjà présent mais nous venons d'ajouter une variable de templates.
Relions (bind) maintenant l'événement clic au bouton de recherche
<button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
La variable de modèle filter nous a bien aidé à récupérer la valeur de l'input. Nous avions déjà vu la syntaxe de liaison d'événement Angular. Elle est composée d'un nom d'événement cible entre parenthèses à gauche d'un signe égal et d'une instruction de modèle entre guillemets à droite.
Utilisons la propriété filteredLocationList dans la boucle ngFor :
<app-housing-location *ngFor="let housingLocation of filteredLocationList" [housingLocation]="housingLocation"></app-housing-location>
Implémentation de la fonction gestionnaire d'événement
Ajouter le code de la fonction de filtre dans la class HomeComponent :
filterResults(text: string) { if (!text) { this.filteredLocationList = this.housingLocationList; } this.filteredLocationList = this.housingLocationList.filter( housingLocation => housingLocation?.city.toLowerCase().includes(text.toLowerCase()) ); }
Notez que cette fonction utilise comme attendu la méthode filter. On peut se poser la question "Pourquoi placer cette fonction de gestion de l'événement en dehors d'un service directement dans un composant". Il me semble que la réponse est la suivante. Dans la mesure où l'événement en question n'aura pas pour conséquence qu'une modification du component, il est logique de le placer dans ce dernier.
Résultats
Enregistrer et relancer le cas échéant votre application.
ng serve
Vous devriez pouvoir filtrer la liste des maisons en fonction de leur ville (location)