`[class]` bindings have different behavior with input/template bindings when ExpressionChangedAfterChecked

🐞 bug report

Affected Package

@angular/core render3 with ivy

@angular/core/src/render3/instructions/styling.ts

Is this a regression?

no

Description

Set an object to the same value(creating another new instance) in the ngAfterViewInit, the [class] binding would report ExpressionChangedAfterChecked error.

it should have the same behavior with the template/input binding, which should not report ExpressionChangedAfterChecked error

related to https://github.com/angular/angular/commit/9d1175e2b2b8bc8b282b15f56daac01e0537a5bf#diff-0c1dbc9c91289ccc01bde8bbb4777691R373-R377

🔬 Minimal Reproduction

ivy can not work in stackblitz now, here is the repo

https://github.com/vthinkxie/ng-class-binding-bug/blob/master/src/app/app.component.ts

import { AfterViewInit, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    {{ classMap | json }}
    <!-- this won't report error -->
    <app-test [classMap]="classMap"></app-test>
  `,
  host: {
    // this would report error
    '[class]': 'classMap'
  }
})
export class AppComponent implements AfterViewInit {
  classMap = {
    test: true
  };
  ngAfterViewInit(): void {
    this.classMap = {
      test: true
    };
  }
}

🔥 Exception or Error

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]'.

🌍 Your Environment

Angular Version:

@angular-devkit/architect         0.900.0-rc.10
@angular-devkit/build-angular     0.900.0-rc.10
@angular-devkit/build-optimizer   0.900.0-rc.10
@angular-devkit/build-webpack     0.900.0-rc.10
@angular-devkit/core              9.0.0-rc.10
@angular-devkit/schematics        9.0.0-rc.10
@ngtools/webpack                  9.0.0-rc.10
@schematics/angular               9.0.0-rc.10
@schematics/update                0.900.0-rc.10
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

related to https://github.com/angular/angular/commit/9d1175e2b2b8bc8b282b15f56daac01e0537a5bf#diff-0c1dbc9c91289ccc01bde8bbb4777691R373-R377

cc @kara @AndrewKushnir

[pkozlowski-opensource]

@vthinkxie yeh, as hinted above, I think that the following is going on:

• currently we don’t have great story for setting “dynamic” class / styles on a host (in a non-destructive way) - things will get better with ivy, but this is not the end of it…
• our ExpressionChangedAfterItHasBeenCheckedError is not super consistent and sometimes this error is not thrown where (IMO) it should - this is what I’ve meant by “things working by chance”.

Again, thnx for the use-cases, let me dig into it a bit more and comment back on the issue with the findings.

[vthinkxie]

I got your point Pawel Kozlowski, Thanks for your quick response!

I will discuss this with the rest of the team but don’t hold your breath - I think that the “official” solution will be to use renderer.addClass…

renderer.addClass removeClass setStyle removeStyle works but there are too many boilerplate code when we want to set the class/style dynamicly.

it would be better if renderer could provide equivalent functionality to template className and style binding (like [class] and [style]).