Why valueChanges does not work in my code? - node.js

Question

I have a MatTableDataSource that shows some elements retrieved from my MongoDB and I want to filter each column of the table in order to have only what matches my input.
This is my code:
datatable.component.ts
export class DatatableComponent implements OnInit {
#ViewChild(MatPaginator) paginator: MatPaginator;
pratiche: any;
displayedColumns: string[] = ['idPratica', 'barcode', 'status', 'firstName', 'lastName', 'fiscalCode', 'pratica'];
dataSource = new MatTableDataSource(this.pratiche);
idFilter = new FormControl('');
barcodeFilter = new FormControl('');
filterValues = {
id: '',
barcode: '',
};
constructor(private praticaService: PraticaService) {
this.dataSource.data = this.pratiche;
this.dataSource.filterPredicate = this.createFilter();
}
async ngOnInit() {
const res = await this.praticaService.getAllPratiche();
this.pratiche = res.data;
this.dataSource = new MatTableDataSource(this.pratiche);
this.dataSource.paginator = this.paginator;
this.idFilter.valueChanges
.subscribe(
id => {
this.filterValues.id = id;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
this.barcodeFilter.valueChanges
.subscribe(
barcode => {
this.filterValues.barcode = barcode;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
}
createFilter(): (data: any, filter: string) => boolean {
let filterFunction = function (data, filter): boolean {
let searchTerms = JSON.parse(filter);
return data.id.toLowerCase().indexOf(searchTerms.id) !== -1
&& data.barcode.toLowerCase().indexOf(searchTerms.barcode) !== -1
&& data.status.toLowerCase().indexOf(searchTerms.status) !== -1
&& data.firstName.toLowerCase().indexOf(searchTerms.firstName) !== -1
&& data.lastName.toLowerCase().indexOf(searchTerms.lastName) !== -1
&& data.fiscalCode.toLowerCase().indexOf(searchTerms.fiscalCode) !== -1;
}
return filterFunction;
}
}
datatable.component.html
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="idPratica">
<th class="header" mat-header-cell *matHeaderCellDef>
ID Pratica
<mat-form-field class="filter" floatLabel="never">
<mat-label></mat-label>
<input matInput [formControl]="idFilter">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container>
<ng-container matColumnDef="barcode">
<th class="header" mat-header-cell *matHeaderCellDef>
Barcode
<mat-form-field class="filter" floatLabel="never">
<mat-label></mat-label>
<input matInput [formControl]="barcodeFilter">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element">{{element.barcode}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
pratica.service.ts
public getAllPratiche(): Promise<any> {
const url = "http://127.0.0.1:3001/pratiche/getPratiche";
return new Promise((resolve, reject) => {
this.http.get(url, { responseType: "json", observe: "response" })
.pipe(map((response: any) => response))
.subscribe(res => {
if (res.error) {
reject(res.error);
} else {
resolve(res.body);
}
}, err => {
reject(err)
});
});
}
I retrieve correctly my data from my MongDb but when I try to filter it, nothing happens. I'm new on angular and probably I am making mistakes on Promise vs Observable. Any suggestion?