1

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?

Improve this question
8
  • Self close means -- you want to destroy the components ? Commented Jun 30, 2019 at 9:22
  • 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 Commented Jun 30, 2019 at 9:23
  • Check this stackoverflow link Commented Jun 30, 2019 at 9:24
  • Possible duplicate of How to remove a component dynamically in angular 6 Commented Jun 30, 2019 at 9: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? Commented Jun 30, 2019 at 9:27

1 Answer 1

Reset to default
2

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 
      }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments