Angular material mat-cell content changes based on another mat-cell value

Question

I'm having issue with mat-cell value to display content based on another mat-cell content. I have a column with status "ready", "failed", "success" which is updated dynamically. On another column called "Actions" and it is not from dataSource. It's just html that shows a button when status value is "success" and show nothing when status is "failed" or "ready"

I tried using *ngIf but doesn't seem to work.

<ng-container matColumnDef="actions">
  <mat-header-cell mat-header-cell *matHeaderCellDef [ngClass]="'columnActions'">Actions
  </mat-header-cell>
  <mat-cell mat-cell *matCellDef="let element" class="small-text" [ngClass]="'columnActions'">
  <button *ngIf="columnStatus == 'SUCCESS'" mat-icon-button style="padding-right:0px; padding-left:10px"><mat-icon>done</mat-icon>
  <button *ngIf="columnStatus == 'FAILED'" mat-icon-button style="padding-right:0px; padding-left:10px"><mat-icon>clear</mat-icon>
</mat-cell>
</ng-container>

I expect when the column "Status" cell value is "SUCCESS" the Column "Action" cell value to display different icon done for success and clear for fail. Column Status changes dynamically works file from [dataSource]. It's the column Action that won't change based on value in Status column.

thanks in advance

igorepst igorepst · Accepted Answer · 2019-04-10T17:08:01

I imagine the code columnStatus == 'SUCCESS' is wrong in the sense that the columnStatus should be per element, isn't it? Moreover, there is if ... else construct. So it should be like this;

<mat-cell mat-cell *matCellDef="let element" class="small-text" [ngClass]="'columnActions'">
  <button *ngIf="element.columnStatus === 'SUCCESS'; else otherStatus" mat-icon-button style="padding-right:0px; padding-left:10px">
      <mat-icon>done</mat-icon>
  </button>
  <ng-template #otherStatus>
      <button mat-icon-button style="padding-right:0px; padding-left:10px">
         <mat-icon>clear</mat-icon>
      </button>
  </ng-template>
</mat-cell>

Angular material mat-cell content changes based on another mat-cell value

1 Answers