Outputting array of components in Angular 2

Question

I am building a modal component in Angular 2 (and TypeScript) that will have different views/pages. It won\'t have tabs, but the concept is pretty similar. Basically I am st

Answer 1

You can create a "component factory" as a directive that loads appropriate components using DynamicComponentLoader, based on parameters you pass from your modal.

@Directive({ selector: 'component-factory' })
class ComponentFactory {
  @Input() name;
  @Input() visible;
  @Output() loaded = new EventEmitter();
  constructor(
    private _dcl: DynamicComponentLoader, 
    private _eref: ElementRef) {

  // import OneCmp, TwoCmp in this file...
  private components: { one: OneCmp, two: TwoCmp }

  ngOnInit() {
    this._dcl.loadNextToLocation(
      this.components[this.name], 
      this._eref)
      // pass values to the loaded components
      // and send it's instance to the parent
      .then((ref: ComponentRef) => {
        ref.instance.visible = this.visible;
        this.loaded.emit(ref.instance)
      });
  }
}