.HTML:
Can someone assist me with implementing a filter in this component? I tried using it with the expansion table, but unfortunately, the filter is not working as expected.
<mat-dialog-content style="width: 63rem; overflow: initial;">
<div class="searchField">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Tele" #input>
</mat-form-field>
</div>
</mat-dialog-content>
.TS:
getProductList() {
this.commonservice.getProdList().subscribe((response: any) => {
console.log('Response from API is ', response);
if (response) {
this.productInfo = response;
this.dataSource = this.productInfo;
console.log('Product Info ', this.productInfo);
}
}, (error) => {
console.log('Error is ', error);
});
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
console.log('filtered data ', this.dataSource.filter);
}
https://i.stack.imgur.com/7CfUK.png https://i.stack.imgur.com/5Avr0.png