I try in vain to filter my table but it does not react correctly, I don't see where my mistake is.
html part :
<mat-form-field appearance="outline">
<mat-label>Rechercher</mat-label>
<mat-icon style="color: #4D59EF;" matPrefix>search</mat-icon>
<input matInput [formControl]="searchBar" placeholder="Rechercher" #input>
</mat-form-field>
ts 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;
}
Thanks for your help !
No data has been assigned to the data source
You can assign it when declaring the dataSource variable, the rest of your logic should be working as expected.
dataSource: MatTableDataSource<IdsGeneralModel> = new MatTableDataSource(ELEMENT_DATA);