Implementation of ng-if directive inside md-table
I am trying to use ng-if inside my md table, but I am 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 directive *cdkCellDef="let row"
i get the error: ERROR Error: No provider for CdkColumnDef!
so how can i implement the directive ng-if
?
+3
user6003897
source
to share
2 answers
The problem is that you are using two structural directives with asterisk syntax for one element. You need to deploy one of them. The following should work:
<ng-template [ngIf]="!(authService.isAdmin())">
<md-cell *cdkCellDef="let row">
<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>
</ng-template>
Or just move ngIf
to ng-container
:
<ng-container *ngIf="!(authService.isAdmin())">
<md-cell *cdkCellDef="let row">
+1
source to share
you can do something like:
This allows you to have mat-cell and * 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>
0
source to share