ngClass not setting from Component Method

[nigeman]

Maybe I am doing this wrong so someone correct me if I have and I will remove this ticket- But...
Referring to this documentation here regarding setting classes from a component method.

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass

Plunker here:
http://plnkr.co/edit/1lvH5zHZIHIQS4hmNOoW?p=preview

In the Plunker I have two headers. One that uses the regular inline way (second header) and the first header is using the way mentioned in the template syntax documentation.

Expect:
Both headings to be red with the class "red".

Result:
Only one heading has the class "red".

This happens on A2 2.0.0-beta.8 and seems to be on beta.7 aswell.

[pkozlowski-opensource]

Interestingly, this happens only in the dev mode, switching to the prod mode makes things working as expected: http://plnkr.co/edit/v2RQjnECAAiLnkycRVRs?p=preview

[pkozlowski-opensource]

I can confirm that this is a bug, either in ngClass itself or in checks being done in the dev mode. To be investigated.

[nigeman]

Cool. Never guessed to check this in prodMode. I'll check this in future if anything comes up.

[thomashilzendegen]

AFAIS it has something to do with the differ and that the setClasses() method returns always a new object reference but did not step deeper, yet.

By changing the setClasses method this way:

_classes = { red: this.active }

setClasses() {
  this._classes.red = this.active;
  return this._classes;
}

it works.

[thomashilzendegen]

Correcting my previous comment:

I traced to the following behaviour:

The setter for rawClass will be called two times after the last ngDoCheck, so the classes will be cleaned always, as the first line of the setter is:

this._cleanupClasses(this._rawClass);

[pkozlowski-opensource]

Digging into it a bit more it looks like there is a different behavior in terms of directives lifecycle when a function is used as an expression. I've just pushed a diff with 2 tests which, IMO should both pass. But they don't since methods called on NgClass are not the same. In the working case we can see:

LOG: 'setter', Object{foo: true}
LOG: 'ngDoCheck', Object{foo: true}
LOG: 'setter', Object{foo: true}
LOG: 'ngDoCheck', Object{foo: true}

while the broken case with a function gives:

LOG: 'setter', Object{foo: true}
LOG: 'ngDoCheck', Object{foo: true}
LOG: 'setter', Object{foo: true}
LOG: 'setter', Object{foo: true}
LOG: 'ngDoCheck', Object{foo: true}
LOG: 'setter', Object{foo: true}

Please notice that in the non-working case there are calls to a setter that are not followed by the ngDoCheck method.

@vsavkin is it to be expected? Implementation of the NgClass directive (and many others, I suppose) assumes that a call to setter(s) is followed by the ngDoCheck call. Was it wrong assumption?

[pkozlowski-opensource]

Here is a diff with 2 tests that expose the issue: pkozlowski-opensource@6cb2731

Once again, from what we can observe during run-time the problem seems to be limited to the dev mode.

[vicb]

fixed in 2.0.0

[Hobart2967]

Re-Occurs in angular 5.2.10!