implementing ng-if directive inside md-table

Admin 1
Viewed 16447

I'm trying to use ng-if inside my md-table but I'm getting the error:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

Here is my code for the template 

<md-row *cdkRowDef="let row;  columns: displayedColumns" (click)="viewNarrative(row)">
  <md-cell *cdkCellDef="let row" *ngIf="!(authService.isAdmin())">
    <button md-button (click)="viewNarrative(row)"><md-icon>toc</md-icon> Narrative</button>
    <button md-button (click)="editDemographics(row)"><md-icon>edit</md-icon> Demographics</button>
    <button md-button (click)="confirmDelete(row, $event)" style="line-height:normal"><md-icon>delete</md-icon> Delete</button>
  </md-cell>
</md-row>

when I remove the *cdkCellDef="let row" directive I get the error: ERROR Error: No provider for CdkColumnDef! so how can I implement the ng-if directive?

angular-material2 angular
3 Answers

you can do something like:

This allows you to have the mat-cell and an *ngIf too

<ng-container matColumnDef="isActive">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Active </mat-header-cell>
  <mat-cell *matCellDef="let element"> <mat-icon *ngIf="element.isActive;else notactive;">done</mat-icon>
    <ng-template #notactive><mat-icon>clear</mat-icon></ng-template>
  </mat-cell>
</ng-container>
user_41203400

You can apply *ngIf outside md-cell, like this.

<md-row *cdkRowDef="let row;  columns: displayedColumns" (click)="viewNarrative(row)">
  <md-cell *cdkCellDef="let row">
    <button md-button (click)="viewNarrative(row)"  *ngIf="!(authService.isAdmin())"><md-icon>toc</md-icon> Narrative</button>
    <button md-button (click)="editDemographics(row)" *ngIf="!(authService.isAdmin())"><md-icon>edit</md-icon> Demographics</button>
  </md-cell>
</md-row>
user_77707800
Related