ngClass and [class] works bad together

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

I’m trying to use both ngClass and [class] to set classes that a need like here <h1 [ngClass]="{'ui-true-class': true, 'ui-false-class': false}" [class]="styleClass">Hello</h1> <button (click)="styleClass='styleClassValue'">set styleClass</button>

Current behavior

When some value setted to styleClass variable it also writes all key-classes from ngClass’es map that has false value(ui-false-class in example) Expected behavior

Setting value to styleClass doesn’t affect classes from ngClass value like described above Minimal reproduction of the problem with instructions you can see it here plunk

1. see initial value class on element “Hello” is “ui-true-class”
2. click “set styleClass” button
3. see value class on element “Hello” is “ui-true-class styleClassValue ui-false-class”

I’ve tried to look deeper and found that after changing styleClass value like in example classes from ngClass setted after this sequence of method calls: set ng_class.js NgClass._applyClasses(this._rawClass, false) ng_class.js and code here Object.keys(rawClassVal).forEach(function (klass) { if (isPresent(rawClassVal[klass])) _this._toggleClass(klass, !isCleanup); });

So rawClassVal[klass] by itself doesnt matter here and klass always will toggle since second parameter in NgClass._applyClasses(which called isCleanup) equals ‘false’.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.0.X

• Browser: [Chrome | Firefox ] at least

• Language: [all | TypeScript X.X | ES6/7 | ES5]

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

[vytautas-pranskunas-]

I noticed same behavior with interpolation like: <div class="some-class-{{someVariable}}" [class.new-class]="true">

new-class is not added

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}