Creating Angular dynamic component with detaching data

detach-dynamic-component.ts

export class ValidationMessageDirective implements AfterViewInit, OnDestroy {

private validationMessageComponent: ComponentRef<ValidationMessageComponent> = null;

ngAfterViewInit(): void {
  let factory = this.componentFactoryResolver.resolveComponentFactory(this.vmComp);
  this.ngOnDestroy();
  this.validationMessageComponent = this.viewContainer.createComponent(factory, null, this.viewContainer.injector);
  this.validationMessageComponent.changeDetectorRef.detectChanges();
}

ngOnDestroy(): void {
   if (this.validationMessageComponent) {
     this.validationMessageComponent.changeDetectorRef.detach();
     //this.validationMessageComponent.destroy();
   }
}

constructor(
  private viewContainer: ViewContainerRef,
  private componentFactoryResolver: ComponentFactoryResolver,
  @Inject(ValidationMessageComponent) private vmComp:    Type<ValidationMessageComponent>
  ) {}
  
/**
 * @author Sergey Romanchuk
 * @site https://stackoverflow.com/questions/42387348/angular2-dynamic-content-loading-throws-expression-changed-exception
 */