Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef

Question

I have a question regarding dynamic component creation in Angular 2 rc5.

So let\'s assume that we have two plain angular components:

  @Component({
          


        

Answer 1

You should never modify DOM outside Angular because it will lead to unpredictable behavior. Even if you append element manually it means nothing because it's not processed by Angular. All changes to DOM inside Angular app have to go through Angular methods.

Dynamically create a new component:

@Component({
    selector: 'my-component',
    template: '
',
})
export class MyComponent {
    @ViewChild('element', {read: ViewContainerRef}) private anchor: ViewContainerRef;

    constructor(private resolver: ComponentFactoryResolver) { }

    whatever() {
        let factory = this.resolver.resolveComponentFactory(ChildComponent);
        this.anchor.createComponent(factory);
    }
}