I am facing issues while trying to filter my table, the reaction is not correct and I can't seem to find where I went wrong.
Here is the HTML part :
<mat-form-field appearance="outline">
<mat-label>Search</mat-label>
<mat-icon style="color: #4D59EF;" matPrefix>search</mat-icon>
<input matInput [formControl]="searchBar" placeholder="Search" #input>
</mat-form-field>
And the TypeScript part :
displayedColumns: string[] = ['natureDuService', 'domaineApplication', 'statusService', 'descriptionFonctionnelle'];
dataSource: MatTableDataSource<IdsGeneralModel> = new MatTableDataSource();
searchBar = new FormControl('');
filteredValues = { natureDuService: '', typeService: '', couvGeo: '', status: '', domain: '' };
ngOnInit(): void {
this.searchBar.valueChanges.subscribe((searchBarFilterValue) => {
this.filteredValues['natureDuService'] = searchBarFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.dataSource.filterPredicate = this.customFilterPredicate();
}
customFilterPredicate() {
const myFilterPredicate = function (data: IdsGeneralModel, filter: string): boolean {
let searchString = JSON.parse(filter);
let searchFound = data.natureDuService.toString().trim().toLowerCase().indexOf(searchString.natureDuService.toLowerCase()) !== -1
if (searchString.topFilter) {
return searchFound
} else {
return searchFound
}
}
return myFilterPredicate;
}
Your assistance will be greatly appreciated. Thank you!