How to add condition and function both in ngClass?

Question

I need to use both function and condition in ngClass like below:

<div [ngClass] = "i==1 ? 'active':'inactive',getclass()">
</div

TS

getclass(){
return 'myclassname'
}

Prabhakaran M · Accepted Answer · 2023-03-11 11:57:29Z

1

You can use function as well. You just need to pass as an array like below,

<div [ngClass]="[i === 1 ? 'active': 'inactive', getClass()]"> </div

answered Mar 11, 2023 at 11:57

Prabhakaran M

1572 silver badges9 bronze badges

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

Comments

jitender · Accepted Answer · 2023-03-10 14:20:38Z

0

Not sure what's the use case of your function here but you can pass i value to the function and call the function only something like

<div [ngClass] = "getclass(i)">
</div

getclass(input){
   let cls=input==1 ? 'active':'inactive';
   return `${cls} myclassname`
}

answered Mar 10, 2023 at 14:20

jitender

10.4k1 gold badge21 silver badges49 bronze badges

MGX · Accepted Answer · 2023-03-10 16:08:17Z

0

ngClass accepts objects

<div [ngClass]="{
  active: i === 1,
  inactive: i !== 1,
  myclassname: true
}">
</div>

Otherwise, use an input on the class

<div [ngClass]="getClasses(i)"></div>

getClasses(i: number) {
  const classes: any = { myclassname: true };
  if (i === 1) classes.active = true;
  else classes.inactive = true;
}

answered Mar 10, 2023 at 16:08

MGX

3,5315 silver badges19 bronze badges