I am in need of help with a filter for my simple list of people, where each person has a name and a first name. I want to be able to search for a specific field or both fields at the same time.
https://i.sstatic.net/pPRjO.png
The HTML code 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>
I have created this custom 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;
}
}
This is my Search class:
export class Search {
constructor(
public nom?: string,
public prenom?: string,
) {
}
}
When I provide a string input for searchText, the filter works fine. However, when searchText is an object, the filter does not respond to changes in searchText.nom or searchText.prenom. Can anyone assist me with this issue?
Thank you for your help!