2

I'm trying to use angular dynamic component loader and I'm facing a change detection issue when I'm using ChangeDetectionStrategy.OnPush. I read about it in this git issue and saw this Plunker and from what I understand is that dynamic added component are detach from their parent change detection tree and onPush won't work (Only default).

I was wondering if there's a way to still use ChangeDetectionStrategy.OnPush. Is there a way to assign component to certain tree? For now I changed all my regarding components from onPush to Default and the app works fine but I do prefer to use the onPush strategy.

Gili Yaniv
  • 3,073
  • 2
  • 19
  • 34
  • _from what I understand is that dynamic added component are detach from their parent change detection tree_ - that's not true, dynamically added components are checked in the same way as static components in the template [when embedded views are checked](https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f#0013) – Max Koretskyi Jul 31 '17 at 12:38

1 Answers1

2

You can just invoke change detection from the parent using the ComponentRef reference you get when you create the component, every time you change the status of the component.
Within the dynamic component there shouldn't be a difference.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I tried it before and it worked, But it cause me to be very strict about the change detection and call it many times in every component. I'm searching for a way to simulate like the dynamic component was there all along (Like static component) – Gili Yaniv Jul 31 '17 at 12:01
  • Not sure what you mean by "it cause me to be very strict about the change detection and call it many times in every component". You can make properties getters/setters and call `this.cdRef.markForCheck()` at the end of the setter. I also don't understand what you mean by "a way to simulate like the dynamic component was there all along (Like static component)" – Günter Zöchbauer Jul 31 '17 at 12:05
  • Lats say for the propose of this example I have 20 setters, It cause's be to manually check for changes in 20 different places. In static component the onPush trigger by itself change detection and there's no need to manually check after every set. – Gili Yaniv Jul 31 '17 at 12:09
  • I don't think there is a way to automate this. `OnPush` only runs change detection when an `@Input()` was updated by change detection, not when a property was changed. Dynamically added components don't have inputs, therefore there is no way to make Angular run change detection when an `@Input()` was updated. – Günter Zöchbauer Jul 31 '17 at 12:12
  • So basically I have to use default change detection or trigger it by my self in onPush ? – Gili Yaniv Jul 31 '17 at 12:25
  • Yes, basically. What also should work is to use `ngDoCheck()` in the dynamic component and check if the model changed and then call `markForCheck()` – Günter Zöchbauer Jul 31 '17 at 12:27
  • Ok... Thanks @Günter – Gili Yaniv Jul 31 '17 at 12:37