LoaderDirective

loader.directive.ts

import {
  ComponentFactoryResolver,
  Directive,
  Input,
  OnInit,
  Output,
  ViewContainerRef,
  ComponentRef,
  EventEmitter
} from '@angular/core';

// tslint:disable-next-line:directive-selector
@Directive({ selector: '[loadComponent]' })
export class LoaderDirective implements OnInit {
  // tslint:disable-next-line:no-input-rename
  @Input('loadComponent')
  component: any;

  @Output()
  loaded: EventEmitter<ComponentRef<any>> = new EventEmitter();

  constructor(
    protected cfRef: ComponentFactoryResolver,
    protected vcRef: ViewContainerRef,
  ) { }

  /* istanbul ignore next */
  ngOnInit() {
    if (!this.component) { return; }
    const componentFactory = this.cfRef.resolveComponentFactory(this.component);
    const componentRef = this.vcRef.createComponent(componentFactory);

    this.loaded.emit(componentRef);
  }

}