Eseguire ricerche in una tabella Angular Material

Per un piccolo progetto sto usando Angular Material; nel complesso non è male, ma pecca su alcune rispetto a tool simili.

Una di queste è la ricerca in una mat-table; di default non c'è e dobbiamo impostarla noi.

Ma non è una cosa difficile; cominciamo dalla funzione Typescript:

  doFilter(event: Event): void {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

Dove do per scontato che abbiamo già implementato il vostro dataSoource.

Qui sotto il codice nella pagina:

  <mat-form-field appearance="standard">
    <input matInput placeholder="Cerca..." (keyup)="doFilter($event)">
  </mat-form-field>

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort
         (matSortChange)="announceSortChange($event)">

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>TITOLO</th>
      <td mat-cell *matCellDef="let element">{{element.title}}</td>
    </ng-container>

    <ng-container matColumnDef="author">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>AUTORE</th>
      <td mat-cell *matCellDef="let element">{{element.author}}</td>
    </ng-container>

    <ng-container matColumnDef="editor">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>EDITORE</th>
      <td mat-cell *matCellDef="let element">{{element.editor}}</td>
    </ng-container>

    <ng-container matColumnDef="isbn">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ISBN</th>
      <td mat-cell *matCellDef="let element">{{element.isbn}}</td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>PREZZO</th>
      <td mat-cell *matCellDef="let element">{{element.price}}</td>
    </ng-container>

    <ng-container matColumnDef="note">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>NOTE</th>
      <td mat-cell *matCellDef="let element">{{element.note}}</td>
    </ng-container>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">

        <button mat-mini-fab color="accent" aria-label="Modifica libro" class="mr_5"
                (click)="openDialogBook(element.id)">
          <mat-icon>create</mat-icon>
        </button>

        <button mat-mini-fab color="warn" aria-label="Cancella libro">
          <mat-icon>delete_forever</mat-icon>
        </button>

      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>

Enjoy!