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!
typescript angular material mat-table
Commentami!