1

I have a button with the attribute mat-raised-button

<button mat-raised-button (click)="function()">My Button</button>

I would like to add or remove the mat-raised-button attribute with my function. Is there a way to do this? Or will I need to change the CSS instead?

Manon Ingrassia
  • 270
  • 3
  • 14
  • Is answered here: https://stackoverflow.com/questions/44597077/angular-4-how-to-apply-a-directive-conditionally – Brixto Jan 11 '18 at 11:58

2 Answers2

3

You can achieve this using only 1 button. 

<button class="btn btn-sm" [attr.mat-raised-button]="attributeCondition ? '': null" (click)="changeAttributeCondition()">Button</button>
  • Setting attribute as a null will remove that
  • Setting attribute with blank, just add that attribute
  • Setting attribute with any value, set attribute

For ref: Discussion over here

Bheda91
  • 58
  • 1
  • 7
0

You can use two different buttons and using *ngIf you can display only one at a time based on your condition.

<button mat-button (click)="function()" *ngIf="!isCondition">My Button</button>
<button mat-raised-button (click)="function()" *ngIf="isCondition">My Button</button>

Hope that helps.

Kirubel
  • 1,461
  • 1
  • 14
  • 33