Your Location is: Home > Javascript

How do I show a message in a custom table if nothing was found during filtering?

From: Paris View: 3338 and.neo2020 

Question

I have developed a custom table in Angular (NOT a MAT-TABLE) and would like to display a message to the user when filtering if the search was unsuccessful.

I have implemented the following:

// HTML
<div class="filter-input">
 <label>
   <input #filter type="text" formControlName="searchText" placeholder="Search" />
 </label>
</div>

<table class="custom-table">
...
<tbody formArrayName="rows" *ngIf="rows && rows !== null && !isLoading">
   <tr class="optimize-row" *ngFor="let rowControl of rows.controls | filterBySearchText: 'value' :searchTerm; let rowIndex = index"> // Here i use my filter pipe
...
</tr>
</tbody>
</table>

<!-- Triggered by the filter -->
 <div class="no-search-results">
   <p>Not found!!!</p> // I like to show this message if the search is unsuccessful
 </div>
// Pipe
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterBySearchText'
})
export class FormControlFilterPipe implements PipeTransform {
  transform(items: any[], field: string, value: string): any[] {
    if (!items || (!value || value === null || value.length < 1)) {
      return items;
    }
    return items.filter((item) => {
      const val = JSON.stringify(Object.values(item.value));
      return (val && val.toLowerCase().indexOf(value.toLowerCase()) >= 0);
    });
  }
}
// TS
// Variables for filter
  public searchTerm = '';

  // Variables for Data Table
  public data: any = []; // This are the data in the table
  public isLoading = false;

  // Overview of the ViewChilds
  @ViewChild('filter', {static: true}) filter: ElementRef;

Best answer