Angular Conditional Atribute inside template

Question

How can I give an HTML tag a conditional attribute which toggles depending on the state of a variable declared in the component file? I tried to give it a go unsuccessfully:

 <th mat-header-cell *matHeaderCellDef {{new ? 'mat-sort-header' : ''}}   >

In this case using *ngIf or ng-template is not appropriate due to the *matHeaderCellDef reference.

Thank you.

https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2 — robbieAreBest, Oct 07 '21 at 22:55

score 1 · Accepted Answer · answered Oct 08 '21 at 08:50

You might try following methods to do it-

By Applying *ngIf directive

<th mat-header-cell *matHeaderCellDef *ngIf="!new" >
<th mat-header-cell *matHeaderCellDef mat-sort-header *ngIf="new" >

By using attribute binding-

<th mat-header-cell *matHeaderCellDef [attr.mat-sort-header]="new?'': null" >

Make sure "new" which I have taken from your example code is variable which stores the value of expression to decide whether it has to use mat-sort-header attribute or not. One more tip you can't use new as variable name as its reserved keyword in javascript.

Angular Conditional Atribute inside template

1 Answers1