I implemented two different cases in my Mat-Table. When there is no data, the user will see a message saying "No Data Found". However, if the user enters text in the filter search, the "No Data Found" message should be hidden and replaced with the entered text. Do you have any insights on how to achieve this functionality?
Here is the code snippet I used:
// Filter input
<input matInput #filter (keyup)="applyFilter($event.target.value)" placeholder="Search" />
<!-- Triggered by the filter -->
<div class="no-search-results" [hidden]="isTableHasData">
<p>You searched for <span class="filter-value">"{{ filter.value }}"</span>, but we couldn't find any results.</p>
</div>
<!-- Triggered because there is no data in the backend -->
<div class="no-data" *ngIf="dataSource !== null && dataSource.data !== null && dataSource.data.length === 0">
<p>No Data Found</p>
</div>
// TypeScript Code
public applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
if (this.dataSource.filteredData.length > 0) {
this.isTableHasData = true;
} else {
this.isTableHasData = false;
}
}