Dynamic component detectChanges trigger ngDoCheck but not refresh view

[JiaLiPassion]

This is a related issue of #36667.
Reproduce live demo is here.
https://stackblitz.com/edit/angular-vz1dca?file=src%2Fapp%2Fapp.module.ts
https://stackblitz.com/edit/angular-7h6eer?file=src%2Fapp%2Fapp.module.ts

code is this.

import {
  Component,
  NgModule,
  ViewContainerRef,
  ComponentFactoryResolver,
  Injector,
  ChangeDetectionStrategy,
  DoCheck
} from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { timer } from "rxjs";

@Component({
  selector: "dynamic",
  template: `
    {{ name }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Dynamic implements DoCheck {
  name = "initial name";

  ngDoCheck() {
    console.log("docheck dynamic");
  }
}

@Component({
  selector: "my-app",
  template: `
    <b>Expected</b>: "initial name" changes to "changed name" after 2s<br />
    <b>Actual</b>:<br />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  constructor(
    private _vcRef: ViewContainerRef,
    private _cfr: ComponentFactoryResolver,
    private _injector: Injector
  ) {}

  ngOnInit() {
    const cmptRef = this._cfr
      .resolveComponentFactory(Dynamic)
      .create(this._injector);
    this._vcRef.insert(cmptRef.hostView);

    setTimeout(() => {
      cmptRef.instance.name = "changed name";
      console.log("changing name");
      cmptRef.changeDetectorRef.detectChanges();
    }, 2000);
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, Dynamic],
  entryComponents: [Dynamic],
  bootstrap: [AppComponent]
})
export class AppModule {}

The reason is for dynamic component, there is a host view as a placeholder, the hooks are registered on the host view not the component view, when calling componentRef.changeDetectorRef.detectChanges(), it will run change detection from root host view, and trigger the doCheck hook, but when it really want to refresh child component, since it is a onPush component and not marked dirty, it will not be refreshed.

I will try to resolve this issue in #39463 too.

[alexzuza]

Yes, it would be great if it would work this way.

As workaround people usually use smth like:

cmptRef.injector.get(ChangeDetectorRef).detectChanges();

https://stackblitz.com/edit/angular-kbmdjf?file=src%2Fapp%2Fapp.module.ts

[JiaLiPassion]

@alexzuza , yeah, and in fact this is a bug, since if you are calling change detection from the parent of this dynamic component, the ngDoCheck will also be triggered and the component is not updated. I am trying to make it work as expected.

[pkozlowski-opensource]

This was just fixed via #46641 - the ComponentRef has a new method - setInput that correctly sets an input and makes sure that change detection is properly invoked. More details in #46641

[angular-automatic-lock-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.}