ngClass Is Loading Only One Class Out of a String of Classes

Question

I am using ngClass (Angular 2) to load a string of classes if condition is true and other string of classes if the condition is false!

Here is the code:

<label [ngClass]="{'btn btn-success m-btn m-btn--pill': value==2, 'btn btn-outline-success m-btn m-btn--pill':  value!=2}" >

No Issue (but same code as first part in the ngClass): The second part works good where the condition is value!=2 and the class string to be loaded is btn btn-outline-success m-btn m-btn--pill

Issue: The first part where the condition is value==2 and classes string to be loaded is btn btn-success m-btn m-btn--pill but the only class loaded (out of many available in the string) is btn-success.

I am unable to get why ngClass is loading only one class while leaving others classes in the string!

Can some one please let me know if I'm doing something wrong or it is a bug in angular 2?

Why don't you move all the common ones out into a regular style attribute? — jonrsharpe, May 06 '18 at 08:11
Could you please make up your mind which version of Angular you are using? — FDavidov, May 06 '18 at 08:12
In that case, please remove the irrelevant tags as some people look for questions based on those tags and get irrelevant entries. — FDavidov, May 06 '18 at 08:16

score 0 · Answer 1 · answered May 02 '19 at 07:33

I know this question is old but apparently still relevant in angular 7, as I just encountered the same issue.

Somehow angular requires you to move the common classes between 2 ng-class statements (where always one or the other is true) into the class attribute. Otherwise the common ones won't work in the first part of the statement.

So the solution to the problem above is:

<label class="btn m-btn m-btn--pill" [ngClass]="{'btn-success': value==2, 'btn-outline-success':  value!=2}" >

ngClass Is Loading Only One Class Out of a String of Classes

1 Answers1