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>

Please add the TS code that would impact a variable used in the `*ngIf`. — Markus Deibel, Apr 16 '19 at 06:53
I guess the easiest way to do this is just to update your `[dataSource]` after the click event and not to do any Material gymnastics. — IMujagic, Apr 16 '19 at 06:56

Patryk Uszyński · Accepted Answer · 2019-04-16T07:16:39.660

13

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

edited Apr 16 '19 at 07:16

answered Apr 16 '19 at 07:13

Patryk Uszyński

1,069
1
12
20

1

correct. `ngStyle` / `ngClass` would probably be more appropriate here though – Stavm Apr 16 '19 at 07:15

score 1 · Answer 2 · answered Apr 16 '19 at 06:55

1

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);

answered Apr 16 '19 at 06:55

Qortex

7,087
3
42
59

use ngif to hide a row in mat-table

2 Answers2