use ngif to hide a row in mat-table

Question

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>&nbsp; &nbsp; &nbsp;
      <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>

Answer 1

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

Answer 2

You need to modify your dataSource object from the component code, application in your case, and remove the row you want to hide.

It depends on your component code, but you will most likely do:

this.application = this.application.splice(i, 1);