Load a Component in custom element dynamically

Question

I'm trying to inject a component on a container dinamically

Component:

@Component({...})
export class InvestmentProcess{

    @ViewChild('container') container;
    constructor(public dcl: DynamicComponentLoader) {}

    loadComponent(fooComponent: Type){
        this.dcl.loadNextToLocation(fooComponent, container);
    }
}

Template:

<div #container> </div>

When I run the function loadComponent the following error is thrown:

TypeError: location.createComponent is not a function

That's becouse container is an ElementRef typed variable, and loadNextToLocation expects a ViewContainerRef as the second parameter. As official docs said, the ViewContainerRef can be extracted from an element via @ViewChild, but I haven't find any example to do it properly.

Working with Angular2.0.0rc1

*For a detailed how to with plunker check [this](http://stackoverflow.com/a/37044960/1679310)* — Radim Köhler, Jun 01 '16 at 16:22

score 3 · Accepted Answer · edited May 23 '17 at 12:02

DynamicComponentLoader is going to be deprecated. Use ViewContainerRef.createComponent()

@Component({...})
export class InvestmentProcess{

    @ViewChild('container', {read: ViewContainerRef}) container:ViewContainerRef;
    constructor(private resolver: ComponentResolver) {}

    loadComponent(fooComponent: Type){
      this.resolver.resolveComponent(fooComponent).then((factory:ComponentFactory<any>) => {
        this.cmpRef = this.target.createComponent(factory)
      });        
    }
}

See also Angular 2 dynamic tabs with user-click chosen components

Load a Component in custom element dynamically

1 Answers1