Angular ngClass with two dynamic property binding classes?

Issue

I want to make buttons whose color and border color are set as independent variables in the component controller. The documentation and these answers show how to do multiple static classes but not multiple dynamic classes. I tried a few ways but these didn’t work:

[ngClass]="[color] [border]" // doesn't work

[ngClass]="[color], [border]" // doesn't work

[ngClass]="[color, border]" // not dynamic binding

[ngClass]="{[iClass]: true, [iBorder]: true,}" // doesn't work

Maybe I should use one dynamic class with in the view and spin up the CSS properties into a class on the fly in the component controller?

Solution

Try this:

<div [ngClass]="{'class1': expression1, 'class2': expression2}"></div>

Answered By – Zrelli Majdi

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.