How to conditionally add attribute to HTML element in angular 6

Question

I wanted to change mat-button type dynamically based on certain conditions. This requires changing an attribute of <button> element dynamically. What is the best way to do that? Below is a stackblitz with basic setup.

https://stackblitz.com/edit/angular-material-change-btn-type

I've seen this post. But there are total 8 button types and I think probably it won't be a good solution to add 8 conditions and bind them to a variable. Is there any better alternative?

Possible duplicate of How to add conditional attribute in Angular 2? — porgo
– porgo, Commented May 14, 2019 at 9:00
Not really. There are 8 button types available. And i don't think it would be a good solution to add 8 conditions for them. Instead I am seeking for an option to bind a variable to element itself in the form of attribute — Mahesh
– Mahesh, Commented May 14, 2019 at 9:03
This is not supported. stackoverflow.com/questions/37489761/… — Muhammet Can TONBUL
– Muhammet Can TONBUL, Commented May 14, 2019 at 9:05
Thanks @MuhammetCanTONBUL. But is there any better approach/work-around to solve this problem? — Mahesh
– Mahesh, Commented May 14, 2019 at 9:07

NULLchimp · Accepted Answer · 2019-05-14 09:59:25Z

3

You should be able to solve this by just changing the button element in your template to:

<button mat-button [ngClass]="selectedButtonType">This Button </button>

I hope that helps!

edited May 14, 2019 at 9:59

answered May 14, 2019 at 9:40

NULLchimp

7854 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahesh Over a year ago

Oh, that's pretty useful. I didn't know that it works with classes as well. Thank you so much for help.

Collectives™ on Stack Overflow

How to conditionally add attribute to HTML element in angular 6

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related