I have an Angular Material table populated with data. One column displays a select list and the column beside it has a "Save" button. All of this is working correctly. What I want to be able to do to is display a message that says "Saved!" after the relevant row has been saved. How would I do this? The code below works but it displays "Saved!" for every row instead of the specific row. I’m thinking I’ll need to track the index or something but I’m not sure how to do this.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="save"> <th mat-header-cell *matHeaderCellDef>Save</th> <td mat-cell *matCellDef="let element"> <button mat-raised-button color="primary"> Save </button> <div *ngIf="this.isSaved===true">Saved!</div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row (click)="saveData(row)" *matRowDef="let row; columns: displayedColumns;"></tr> </table>
Any suggestions that help resolve this would be much appreciated.
Source: Angular Material Quesions