Angular - How a destroy a Dynamically component by a button click

Question

I am using this to dynamically create a component in angular:

addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const compRef = viewContainerRef.createComponent(componentFactory);
    compRef.instance.someProperty = "some data";
}

So each time the method is executed a new instance of the component is created. Up to there, all is great but my question is:

How do I destroy these created components from the ChildComponent itself with a button click event?

Yes, if I create 5 components (for example) ... I want to be able to click on a button on the component and self destroy it — , Jun 30 '19 at 09:23
Check this [stackoverflow link](https://stackoverflow.com/questions/52354312/how-to-remove-a-component-dynamically-in-angular-6) — nitin9nair, Jun 30 '19 at 09:24
Possible duplicate of [How to remove a component dynamically in angular 6](https://stackoverflow.com/questions/52354312/how-to-remove-a-component-dynamically-in-angular-6) — nitin9nair, Jun 30 '19 at 09:25
This is not how I want to do it. I want to trigger a self destroy on the childComponent itself. Can it be done? — , Jun 30 '19 at 09:27
A trigger can only happen if a event is done or using any setTimeout. — nitin9nair, Jun 30 '19 at 09:29
Yes, suppose the component has a close button:
I am a component
... I want to be able to destroy it — , Jun 30 '19 at 09:32
The above link clearly states that you have to take a reference to that component and you have to destory that component reference on button click. Try that out — nitin9nair, Jun 30 '19 at 09:35

score 2 · Accepted Answer · answered Jun 30 '19 at 13:50

1) You can keep track of component or all component in a variable or in a object and destroy them:-

2) Or, destroy previous component when loading new one in DOM by storing last reference and .destroy() them before inserting new one.

.html

 <ng-container #dynamicComponentContainer id="dynamicComponentContainer"></ng-container>

.ts

         let componentRef = this.componentFactoryResolver.resolveComponentFactory(cmptName).create(this.injector);

                // check for duplicates and update with new one
             //   this.checkForDuplicateCmp(componentRef);

                componentRef.instance['inputdata'] = initCmpInputdata;
                let indexView = this.dynamicComponentContainer.length;
                this.dynamicComponentContainer.insert(componentRef.hostView, indexView);

      // keep refrence of lastComponent added to DOM
            this.lastComponent = componentRef;


  public remove component(){
    // destroy components as on click
      this.lastComponent.destroy();
     //or
     for (var j = 1; j < this.dynamicComponentContainer.length; j++) {
          this.dynamicComponentContainer.remove(j);  //or pass j 
      }
}

Angular - How a destroy a Dynamically component by a button click

1 Answers1

.html

.ts