I am trying to hide a row after I click on a button in the mat-table. I don't know where to put *ngIf
. I tried on ng-container
but it does not work. Below is my HTML file.
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="application">
<ng-container matColumnDef="ID">
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let application">{{application.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let application">{{application.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="ApplicationDate">
<mat-header-cell *matHeaderCellDef>Application Date</mat-header-cell>
<mat-cell *matCellDef="let application">{{application.applyDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="TrackingNumber">
<mat-header-cell *matHeaderCellDef>Tracking Number</mat-header-cell>
<mat-cell *matCellDef="let application">{{application.trackNumber}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Operation">
<mat-header-cell *matHeaderCellDef>Operation</mat-header-cell>
<mat-cell *matCellDef="let application">
<button mat-raised-button color="primary" (click)="onClickGrant()">Grant</button>
<button mat-raised-button color="warn" (click)="onClickDeny()">Deny</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,15,20]" [pageSize]="5" showFirstLastButtons></mat-paginator>
The other way is to add class to mat-row
and use CSS to hide it.
<mat-row *matRowDef="..." [class.hidden]="YOUR_IF_HERE"></mat-row>
You can look also on similar example from Angualr Material site: https://stackblitz.com/angular/voqbanbobpa?file=app%2Ftable-expandable-rows-example.ts