Dynamically loaded component doesn't work with ChangeDetectionStrategy.OnPush

Question

I'm using angular4 and have a component thats loaded dynamically. I'd like to implement the ChangeDetectionStrategy.OnPush strategy but it doesn't seem to work even though I know that the input objects are brand new. I know that normal change detection doesn't work with dynamically loaded components but is there a way to programmatically push the change so that the ChangeDetectionStrategy.OnPush will detect the change?

Answer 1

Simple answer, no.

Long answer (I'm sorry, my english is not that good), the automatic change detection of @Inputs is wired when your component is used in a template. Angular compiles it and builds a component factory with the code dealing with this change detection things.

If you want to used a dynamic component, the @Inputs are no longer used to bind components in their templates.

But... @Inputs are just public properties of your component, so you can still access and modify them. But the change detection won't detect it.

I see two solutions:

• You can manually run the change detector when you know there is some changes.
• You can use setters instead of direct properties and trigger the change detector in these setters.

Answer 2

There's no such thing as angular4. There is angular and there is a version number https://angular.io/presskit. Yes there is a way. Add an instance of the ChangeDetectorRef class to your component and run its detectChanges() method when you want to detect changes. This is more of a question you could answer by reading the docs...