my filter does not work on the mat-table data table Angular Typescript

Question

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 !

Answer 1

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);