ANGULAR 2+ Removal of the component after its creation

Question

I\'m dynamically creating a component, and I\'d like to delete it after 1 second.

I want to do something like that

  ngOnInit(): void {
    const time =          


        

Answer 1

Make a directive for component holder for dynamic component as below:

import { Directive, ViewContainerRef } from "@angular/core";

@Directive({
    selector: '[component-holder]',
})
export class DynamicComponentDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

Use ViewChild to import it to your component as below:

@ViewChild(DynamicComponentDirective ) dynamicComponentDirective : DynamicComponentDirective ;

After creating some dynamic component, you can remove it as below.

this.viewContainerRef = this.dynamicComponentDirective.viewContainerRef;
this.viewContainerRef.clear();