How to use if-else condition with [ngClass] in angular 7?

Question

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.

Welcome 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](https://stackoverflow.com/help). In particular [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Nicholas K, Jul 25 '19 at 07:14

Tushar · Answer 1 · 2021-11-18T09:51:00.173

38

Do like this:

<div [ngClass]="condition ? 'class1' : 'class2' " ></div>

(Ternary Operator Usage)

edited Nov 18 '21 at 09:51

answered Jul 25 '19 at 07:20

Tushar

1,602
1
15
29

score 22 · Answer 2 · answered Jul 25 '19 at 07:27

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

score 5 · Answer 3 · answered Jul 25 '19 at 07:16

5

You can do like this [ngClass]="{'class1':condition1, 'class2':condition2}".

answered Jul 25 '19 at 07:16

Jitendra

236
2
7

1

you can also add condition like `conditionMatch ? true : false`. – Jitendra Jul 25 '19 at 07:21

score 4 · Answer 4 · answered Jul 25 '19 at 07:15

4

You can try [ngClass]="condition ? 'checked' : 'unchecked'" or [ngClass]="[condition ? 'checked' : 'unchecked']"

answered Jul 25 '19 at 07:15

Seba Cherian

1,720
4
18

score 1 · Answer 5 · answered Jul 25 '19 at 07:22

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'
}
}

How to use if-else condition with [ngClass] in angular 7?

5 Answers5