CODEWITHSUNDEEP
angularangular2-changedetection
Chris Fulstow
Chris Fulstow

Reputation: 41872

Angular 2 OnPush change detection for dynamic components

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?

Upvotes: 10

Views: 4417

Answers (2)

Matt
Matt

Reputation: 1570

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.

Upvotes: 0

yurzui
yurzui

Reputation: 214007

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

Upvotes: 9

Related Questions