Angular 2 OnPush change detection for dynamic components

Question

I have an Angular component that dynamically creates various other types of component inside itself. It binds its own properties to child component @Input properties via an OnChanges hook.

This binding works fine when the child component's change detection is set to Default. Then the new inputs are detected and the component template is updated.

However, it doesn't work when change detection is OnPush, then the change is not detected. I believe the change should be detected because a new immutable object, a string, is assigned to a component @Input property.

Here's a plunker to demonstrate: https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

How can I get this parent-to-dynamic-child property binding to work with ChangeDetectionStrategy.OnPush?

For anyone interested, here's the related GitHub issue with more info about why OnPush change detection works differently for dynamic components - https://github.com/angular/angular/issues/14087 — Chris Fulstow, Feb 03 '17 at 00:21

yurzui · Accepted Answer · 2020-02-17T15:13:44.157

9

As possible workaround for OnPush component would be using setter together with cdRef.markForCheck():

change-detection-onpush.component.ts

@Component({
  selector: 'app-change-detection-onpush',
  template: `
    <div>
      ChangeDetectionStrategy.OnPush: {{ message || '[blank]' }}
    </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChangeDetectionOnPushComponent implements IMyComponent {
  private _message: string;

  constructor(private cdRef: ChangeDetectorRef) {}

  set message(val: string) {
    this.cdRef.markForCheck();
    this._message = val;
  }

  get message() {
    return this._message;
  }
}

Modified Plunker

edited Feb 17 '20 at 15:13

answered Jan 23 '17 at 06:36

yurzui

205,937
32
433
399

Seems, Plunker not working, Would it be possible to move to working code to Stackblitz. – Cegone Feb 17 '20 at 15:07
@Cegone Please look at this plunker https://plnkr.co/edit/NJRoUOvfrI8dQkWRoLcM?p=preview – yurzui Feb 17 '20 at 15:13
Thank you @Yurzui, It's working for me. Actually, I missed this part, set message(val: string) { this.cdRef.markForCheck(); this._message = val; } But, When we try for Dump Component, Is this fine?, because we need to inject ChangeDetectorRef in Constructor. – Cegone Feb 18 '20 at 06:33
if many input variable available in ChangeDetectionOnPushComponent component, is i need to put markForCheck() in all input variable? – jana91 Apr 01 '20 at 05:23

score 0 · Answer 2 · answered Jun 15 '23 at 13:14

Angular now has the setInput() method on ComponentRef https://angular.io/api/core/ComponentRef#setInput

So, you can easily set your inputs from within the host component like so:

const componentRef = viewContainerRef.createComponent<MyDynamicComponent>(MyDynamicComponent);
componentRef.setInput('myInputName', 'myInputValue');

Using this method should automatically call markForCheck() without having to specify additional logic in the child components.

Angular 2 OnPush change detection for dynamic components

2 Answers2