NgClass conditional formatting with multiple classnames ommits first class in the first condition

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Using NgClass for conditional formatting based on a boolean, results in actual applied class that is missing the one element on the first condition (if the first condition is true).

Expected behavior The full class value should be presented in actual html on all cases.

Minimal reproduction of the problem with instructions plnkr: http://plnkr.co/edit/4qw7oFfEchLPmYIssHA1

Template code: <div [ngClass]=“{‘green bold’: true, ‘red bold’: false}”>first</div> <div [ngClass]=“{‘green bold’: false, ‘red italic’: true}”>second</div>

First div should get green and bold classes. It only gets green. Second div should get red and italic classes and gets them both.

Actual:

div ng-reflect-ng-class=“[object Object]” class=“green”>first</div> div ng-reflect-ng-class=“[object Object]” class=“red italic”>second</div>

What is the motivation / use case for changing the behavior? It seems that this is a bug. In my specific code it styles table TD’s according to a boolean value in the underlying object.

Please tell us about your environment: Windows 7 / Centos 6.5, node 6.9.1, ng2 2.2.1

• Angular version: 2.2.1

• Browser: [all]

• Language: [TypeScript 2.0.3]

• Node (for AoT issues): node --version = 6.9.1

[DzmitryShylovich]

<div [ngClass]="{'green bold': true, 'red bold': false}">

actually u are saying that u want bold to be true and false at the same time which doesn’t make much sense

 <div class="bold" [ngClass]="{'green': true, 'red': false}">

is the correct usage

[leiradk]

`from HTML <i [ngClass]=“ngClassForIcons( name )”> Sample here

From components ngClassForIcons(value){ let data = ‘’; if(value == ‘Gerald’){ data = ‘Great Class’; }else if(value == ‘Ariel’){ data = 'Extreme Class; }else{ data = ‘Another Unknown’; } return data; }`

this is for better Idea if your class has a space because sometimes if you use the ngClass expression some won’t work for your desired output Thank you for reading hope will help you.``