I want to use multiple classes inside Angular [ngClass]. I have two classes, It should work accordingly as per the condition of the flag, that are already passed from the component.ts.
1
-
4Welcome to stackoverflow! You'll need to share some more information along with some code. Please have a look around and read through the help center. In particular How do I ask a good question?Nicholas K– Nicholas K2019-07-25 07:14:24 +00:00Commented Jul 25, 2019 at 7:14
Add a comment
|
5 Answers
Do like this:
<div [ngClass]="condition ? 'class1' : 'class2' " ></div>
(Ternary Operator Usage)
Comments
You can do this in several ways :
number one :
[class.my-class]="step=='step1'"
number twe :
[ngClass]="{'my-class': step=='step1'}"
number three :
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
number four :
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
you can get help this link for more help
Comments
You can try [ngClass]="condition ? 'checked' : 'unchecked'" or [ngClass]="[condition ? 'checked' : 'unchecked']"
Comments
html :
<div [ngClass]="{'class1' : value == 1, 'class2' : value == 2}">
.......................
</div>
by using a function
<div [ngClass]="getClass(2)">
.......................
</div>
ts :
export class AppComponent {
value = 1;
getClass(value){
if(value == 1) return 'class1'
else if(value == 2) return 'class2'
}
}
