CODEWITHSUNDEEP
angulartypescript
user3210174
user3210174

Reputation: 23

angular use filter with different input

I have a simple list of people with a name and a first name and I would like to be able to perform a filter when creates a search for a field or the other or both

enter image description here

Html is as follows :

<table class="table table-striped table-hover">
      <thead>
          <tr>
              <th>
                <input [(ngModel)]="searchText.nom" type="text" class="form-control" placeholder="Nom">
              </th>
              <th>
                <input [(ngModel)]="searchText.prenom" type="text" class="form-control" placeholder="Prénom">
              </th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let defunt of defunts | filterPersonne : searchText">
              <td>{{defunt.nom}}</td>
              <td>{{defunt.prenom}}</td>
          </tr>
      </tbody>
  </table>

and I have written this filter:

import { Pipe, PipeTransform } from '@angular/core';
import { DefuntSearch } from '../models/DefuntSearch';
import { Defunt } from '../models/Defunt';
@Pipe({
  name: 'filterPersonne'
})
export class FilterDefuntPipe implements PipeTransform {
  transform(items: Array<Personne>, searchText: Search):  Array<Personne> {
      items = searchText.nom ? items.filter(t => t.nom.includes(searchText.nom)) : items;
      items = searchText.prenom ? items.filter(t => t.nom.includes(searchText.prenom)) : items;
      return items;
   }
}

my class :

export class Search {
  constructor(
    public nom?: string,
    public prenom?: string,
  ) {

  }
}

when I type a string for searchText, the filter works but when searchText is object the filter does not call on searchText.nom or searchText.prenom change. can you help me?

tanks your

Upvotes: 0

Views: 224

Answers (1)

Aravind
Aravind

Reputation: 41533

You can alternatively use as 

<tr *ngFor="let defunt of defunts | filterPersonne : 
                             { nom:searchText.nom, prenom:searchText.prenom }">

Upvotes: 1

Related Questions