How to place a dynamic component in a container

Question

I want to create dynamic components and insert views of these components to a container.

I think this can be achieved by ViewContainerRef.

But I don't know, can we get ViewContainerRef of any component? if yes then how?. I am new to Angular, if there are any other good solutions available to handle this scenario, please suggest me.

Updated I think, I am pretty much near to the solution. Below is the code.

app.component.ts

import {Component} from '@angular/core'; import {ContainerComponet} from './container.component'  @Component({     selector: 'my-app',     template: `     <container> </container>     `,     directives: [ContainerComponet] }) export class AppComponent {      constructor() { }   } 

container.component.ts

import {Component, ComponentResolver, ViewContainerRef} from '@angular/core' import {controlBoxComponent as controlBox} from './controlBox.component';  @Component({     selector: 'container',     template: 'container'     }) export class ContainerComponet {     constructor(viewContainer: ViewContainerRef, private _cr: ComponentResolver) {          this._cr.resolveComponent(controlBox)             .then(cmpFactory => {                 const ctxInjector = viewContainer.injector;                 return viewContainer.createComponent(cmpFactory, 0,  ctxInjector);             })      } } 

controlBox.component.ts

import {Component} from '@angular/core' @Component({     selector: 'controlBox',     template: 'controlBox' }) export class controlBoxComponent {     constructor() { } } 

Output

<my-app>     <container>container</container><controlbox _ngcontent-lsn-3="">controlBox</controlbox> </my-app> 

Expected Result

<my-app>     <container>container     <controlbox _ngcontent-lsn-3="">controlBox</controlbox>     </container> </my-app> 

Answer 1

You can get the ViewContainerRef of the current component by or from an element in the view of the current component

@Component({   selector: '...',   directives: [OtherComponent, FooComponent],   template: `     <other-component></other-component>     <foo-component #foo></foo-component>     <div #div></div>` })  export class SomeComponent {   // `ViewContainerRef` from an element in the view   @ViewChild(OtherComponent, {read: ViewContainerRef}) other;   @ViewChild('foo', {read: ViewContainerRef}) foo;   @ViewChild('div', {read: ViewContainerRef}) div;    // `ViewContainerRef` from the component itself   constructor(private viewContainerRef:ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {}    let factory = this.componentFactoryResolver.resolveComponentFactory(ControlBox)   this.componentRef = this.other.createComponent(factory);   // this.componentRef = this.foo.createComponent(factory);   // this.componentRef = this.div.createComponent(factory);   // this.componentRef = this.viewContainerRef.createComponent(factory);   }); } 

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