Initial part of my application consists of loading data from the database and displaying it using mat-accordion, as below:
async getVouchers() {
this._HttpService.get(${ServerUrl.ApiUrl}voucher
).then(data => {
this.result = data;
if (this.result.vouchers.length > 0) {
this.hasVoucher = true;
this.dataSource = this.result.vouchers;
}
else {
this.hasVoucher = false;
}
this.skeleton = true;
})
}
<div class="ion-margin-top ion-margin-bottom" *ngFor="let data of dataSource">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ data.name }}
</mat-panel-title>
</mat-expansion-panel-header>
<p>{{'voucher.messageTable' | transloco}} {{data.message}}</p>
....
</mat-expansion-panel>
</mat-accordion>
</div>
This part work pretty well.
I am working to create a filter but not working.
<ion-searchbar show-clear-button=“always” placeholder=“Search” (keyup)=“filterVoucher($event)”>
filterVoucher(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
Anyone can give some help to finish this filter??w