Angular 9 custom component directive

custom-component.directive.ts

import {ComponentFactoryResolver, ComponentRef, Directive, Type, ViewContainerRef} from '@angular/core';

/**
 * Allows to embed custom components into views.
 *
 * ## Usage in template
 *
 * ```html
 * <ng-template appCustomComponent></ng-template>
 * ```
 *
 * ## Usage in component
 *
 * ```typescript
 * class MyComponentClass {
 *
 *   @ViewChild(CustomComponentDirective, {static: true}) customComponentContainer: CustomComponentDirective;
 *
 *   somewhereInCode() {
 *     this.customComponentContainer.set(MyComponentClass);
 *   }
 *
 * }
 * ```
 *
 * @param C Type of dynamic component
 * @see https://angular.io/guide/dynamic-component-loader
 */
@Directive({
  selector: '[appCustomComponent]'
})
export class CustomComponentDirective<C = any> {

  private _component?: ComponentRef<C>;

  constructor(
    public viewContainerRef: ViewContainerRef,
    private resolver: ComponentFactoryResolver,
  ) { }

  get component(): ComponentRef<C> | undefined {
    return this._component;
  }

  cleanup() {
    if (this._component) {
      this._component.destroy();
      this._component = undefined;
      this.viewContainerRef.clear();
    }
  }

  set(component: Type<C>) {
    this.cleanup();
    let configComponentFactory = this.resolver.resolveComponentFactory<C>(component);
    this._component = this.viewContainerRef.createComponent(configComponentFactory);
  }

}