How can I register an Angular2 Component whose DOM element has been created by another javascript library?

Question

Suppose I have some component DynamicallyAddedComponent associated with the selector dynamically-added . There is another component ParentComponent which contains some other, non-Angular, third party javascript which is manipulating its internal DOM tree and may add or remove <dynamically-added> tags.

When I add a <dynamically-added> tag directly to the template of ParentComponent it renders just fine, but when my third party library adds tags, angular does not recognize that a component has been added.

I have added both components to the @NgModule declarations in app.module.ts . I have also added calls to ChangeDetectorRef.detectChanges() and ApplicationRef.tick() inside of event handlers for the third party modification events.

So how do I manually tell Angular that a component has been added or removed? How does Angular recognize and bootstrap components internally?

Answer 1

You could run the 3rd party event inside ngZone which would trigger DOM change detection.

Inside component.ts

constructor( public ngZone: NgZone) {}
ngZone.run( () => { // Change the property within the zone
  //3rd party event action
});