CODEWITHSUNDEEP
angular
Manon Ingrassia
Manon Ingrassia

Reputation: 270

Angular 2+: change attribute with onclick

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?

Upvotes: 1

Views: 6050

Answers (2)

Bheda91
Bheda91

Reputation: 58

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

Upvotes: 3

Kirubel
Kirubel

Reputation: 1627

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.

Upvotes: 0

Related Questions