0

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

1 Answer 1

1

You can alternatively use as

<tr *ngFor="let defunt of defunts | filterPersonne : 
                             { nom:searchText.nom, prenom:searchText.prenom }">
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.