matCellDef, matHeaderCellDef and *ngIf in the same container

Question

I'm trying to show a part of a row (which are buttons) of my table based on some boolean value but it only seemed to work if I put it on the button level.

I've this code:

    <ng-container matColumnDef="myCol">
      <th class="table-column" mat-header-cell *matHeaderCellDef> myCol </th>
      <td mat-cell *matCellDef="let data">
        <button *ngIf="data.someBoolean" mat-icon-button color="warn">
          <mat-icon class="mat-18">delete</mat-icon>
        </button>
        <button *ngIf="data.someBoolean" mat-icon-button color= "warn">
          <mat-icon class="mat-18">create</mat-icon>
        </button>
      </td>
    </ng-container>

this works but is repetitive. Putting the *ngIf="data.someBoolean" on the container level didn't work. Any ideas how to fix this?

@yurzui i did, but it had no effect. Am i missing something? The error was there that `data` is no defined — , May 06 '20 at 09:41
Yes, looks like you added it at top level `ng-container` but it should be another `ng-container` — yurzui, May 06 '20 at 09:44

score 1 · Accepted Answer · answered May 06 '20 at 09:43

You can reduce duplication of *ngIf="data.someBoolean" by wrapping duplicated code in ng-container:

<ng-container matColumnDef="myCol">
  <th class="table-column" mat-header-cell *matHeaderCellDef> myCol </th>
  <td mat-cell *matCellDef="let data">
    <ng-container *ngIf="data.someBoolean"> <---------------------- common wrapper
      <button mat-icon-button color="warn">
        <mat-icon class="mat-18">delete</mat-icon>
      </button>
      <button mat-icon-button color= "warn">
        <mat-icon class="mat-18">create</mat-icon>
      </button>
    </ng-container>
  </td>
</ng-container>

But this code will still shows myCol header , is there any way we can make that complete column values and header conditional ? — rahularyansharma, Dec 30 '20 at 06:27

*matCellDef, *matHeaderCellDef and *ngIf in the same container

1 Answers1

matCellDef, matHeaderCellDef and *ngIf in the same container