How to remove a component dynamically in angular

Question

I went through angular dynamically loading components. But i could not find how to remove the component dynamically.

My requirement is that the chat application loa

Answer 1

Use destroy() method

Destroys the component instance and all of the data structures associated with it.

ref:ComponentRef;
loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAdIndex];

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
    this.ref=componentRef;
    (componentRef.instance).data = adItem.data;

  }

  removeComponent(){
   try{
       this.ref.destroy();
   }
   catch(e){
   }
  }

Example:https://stackblitz.com/edit/destroy?file=src/app/ad-banner.component.ts