Can one render Angular 2 Components inside DOM elements from third party libraries?

Question

Suppose I have an Angular 2 app that wraps a third party library such as the Leaflet Mapping API that does it\'s own DOM management.

Invoking the third party library

Answer 1

Yes, if you instantiate a component dynamically, you can pass the DOM element to the component creation method. This DOM element will act as host of the newly created component. However, you would have to manually trigger change detection. Angular CDK solves that problem by introducing portal hosts.

Here is the basic example:

@Component({
    selector: 'a-comp',
    template: `<h2>I am {{name}}</h2>`
})
export class AComponent {
  name = 'A component';
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class AppComponent {
    name = `Angular! v${VERSION.full}`;
    componentRef;

    constructor(r: ComponentFactoryResolver, i: Injector) {
        const someDOMElement = document.querySelector('.host');
        const f = r.resolveComponentFactory(AComponent);
        this.componentRef = f.create(i, [], someDOMElement);
    }

    ngDoCheck() {
        this.componentRef.changeDetectorRef.detectChanges();
    }
}

Here is the plunker.

You can read more about dynamic components in the article:

• Here is what you need to know about dynamic components in Angular