How to add mutiple class name ngClass in angular 2

Question

I am trying to add multiple class name in ngclass but not working.I do not know how to add multiple css class name in angular 2. classname3 is not adding properly. If any one know please help me to resovle this issue.

Note: classname3 is a variable..dynamically i am changing class name. Example: public classname3="itemlist";

app.component.html:

  <div [ngClass]="[check? 'Class name 1' : 'Class name 2 + ' classname3''] "></div>

app.component.ts:

public check=true;
public classname3="itemlist";

Possible duplicate of [Adding multiple class using ng-class](https://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class) — Madhawa Priyashantha, May 17 '19 at 11:41
Madhawa Priyashnatha:Please understand my question. this is different question — cinnan, May 17 '19 at 12:06

Mathew Berg · Accepted Answer · 2019-05-17T12:16:46.160

4

If you just need to add classname3, put it class like this:

<div class="{{ classname3 }}" [ngClass]="[check? 'Class name 1' : 'Class name 2']"></div>

If you need logic that pivots for lots of classes you can do this instead:

<div [ngClass]="{
    'Class Name 1': check,
    'Class Name 2': !check,
    'Classname3': SomeOtherCheck
    ....
}></div>

The docs are a great resource and show all of this. https://angular.io/api/common/NgClass

edited May 17 '19 at 12:16

answered May 17 '19 at 11:41

Mathew Berg

28,625
11
69
90

classname3 is coming dynamicaly – cinnan May 17 '19 at 11:46
Can you add this for else condition like [ngClass]="[check? 'Class name 1' : 'Class name 2 + ' classname3''] " – cinnan May 17 '19 at 12:28

score 0 · Answer 2 · answered May 17 '19 at 11:43

0

[ngClass] expects an expression, with that in mind you need to concat the third class.

<div [ngClass]="(check) ? 'Class name 1' : 'Class name 2' +' classname3' "></div>

answered May 17 '19 at 11:43

acuevasdev

3
2

classname3 is variable...classname3 will change .I can assign like like classname3="test1" or classname3="test3" ect... – cinnan May 17 '19 at 11:55
Your idea only for directly we can put classname but as per my requirement classname3 is a variable – cinnan May 17 '19 at 12:04
I am asking how to add that variable inside ngClass for classname – cinnan May 17 '19 at 12:05
I am waiting for your reply – cinnan May 17 '19 at 12:09
I'm not sure to understand you correctly but you can concat a variable. Anyway I like Mathews answer more – acuevasdev May 18 '19 at 12:25

How to add mutiple class name ngClass in angular 2

2 Answers2