hostBinding `class.xxx` can not update after `zone.onStable`

🐞 bug report

Affected Package

possibly to be @angular/core and NgZone

Is this a regression?

this bug is happened in ng8 and ng9

Description

I add host:{'[class.blue]': 'isColorful'} in @Component, and in lifeCycleHooks like ngOnInit or ngAfterViewInit or ngAfterContentInit i update the property isColorful like

   this._zone.onStable.asObservable().pipe(take(1)).subscribe(() => {
     this.isColorful = true;
   });

and the view was not updated, if not use zone.onStable, it works ok.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-bb6xlp

🔥 Exception or Error

code:

the expected view :

current view:

I expect when trigger zone.onStable to update the hostBinding property, the view will be update too.

🌍 Your Environment

Angular CLI: 9.0.0-rc.7 Node: 10.18.0 OS: win32 x64

Angular: 9.0.0-rc.7 … animations, cli, common, compiler, compiler-cli, core, forms … language-service, platform-browser, platform-browser-dynamic … router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.900.0-rc.7 @angular-devkit/build-angular 0.900.0-rc.7 @angular-devkit/build-optimizer 0.900.0-rc.7 @angular-devkit/build-webpack 0.900.0-rc.7 @angular-devkit/core 9.0.0-rc.7 @angular-devkit/schematics 9.0.0-rc.7 @ngtools/webpack 9.0.0-rc.7 @schematics/angular 9.0.0-rc.7 @schematics/update 0.900.0-rc.7 rxjs 6.5.3 typescript 3.6.4 webpack 4.41.2

[pkozlowski-opensource]

To clarify:

• this is not a regression (all previous versions behave the same) - currently host bindings, for a given component, are not updated as part of component’s view change detection;
• longer term we might revisit behaviour of host bindings wrt to calling detectChanges() as I can see how the current behaviour could be confusing…

[dawidgarus]

@dandean I’m using Renderer2 inside ngDoCheck instead of HostBinding. It introduces little additional boilerplate and actually works when change detection happens for the component:

ngDoCheck(): void {
  bindClass(renderer, element.nativeElement, 'foo', this.classFoo);
}