Angular

templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css'],
entryComponents: [ChartWidget, DataWidget],
})
export class AppComponent {
private elements: Array=[];
private WidgetClasses = {
'ChartWidget': ChartWidget,
'DataWidget': DataWidget
}
@ViewChild(DynamicComponent) dynamicComponent:DynamicComponent;
addComponent(widget: string ): void{
let ref= this.dynamicComponent.addComponent(this.WidgetClasses[widget]);
this.elements.push(ref);
console.log(this.elements);
}
}
this.dynamicComponent.resetContainer();
app.component.html
Add ChartWidget
Add DataWidget
Dynamic Components
{{item}}
https://plnkr.co/edit/lugU2pPsSBd3XhPHiUP1?p=preview
Some modification by @yurzui to use mouse event on the widgets
view.directive.ts
import { ViewRef, Directive, Input, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[view]'
})
export class ViewDirective {
constructor(private vcRef: ViewContainerRef) {}
@Input()
set view(view: ViewRef) {
this.vcRef.clear();
this.vcRef.insert(view);
}
ngOnDestroy() {
this.vcRef.clear()
GoalKicker.com – Angular 2 Notes for Professionals 56