15

When creating components dynamically through a ComponentFactory the ComponentRef that's returned provides a destroy method which works perfectly for what I'd like to accomplish. With that in mind, it looks like all I need to do is a get a ComponentRef for a statically created component and then use its destroy function (which this answer states), but when I try this I get an error saying that "destroy is not a function" even though I do get an object back.

Here's the syntax I'm using for ViewChild:

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;

And my "destroy" call:

private destroy() {
    this.myComponentRef.destroy();
}

Which is triggered here:

<button (click)="destroy()">Destroy</button>

Calling this "destroy" method works for components that I create dynamically, but not statically.

Edit: So it seems like this does partially remove the component, but not from the DOM, which is not the same behavior that occurs when calling "destroy" on a dynamically created component. Additionally, my click event function still fires when I click on a component that I've tried to destroy.

Edit 2: I updated my ViewChild syntax to explicitly read for a ComponentRef and I get "undefined" back:

@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef<MyComponent>;

If that returns "undefined" then I'm guessing this may not be possible.

JGFMK
  • 8,425
  • 4
  • 58
  • 92
badger2013
  • 1,123
  • 2
  • 8
  • 10
  • can u use *ngIf directive to dynamically remove the component? – Julia Passynkova Jun 12 '17 at 19:58
  • Here's the Angular component lifecycle hooks page https://angular.io/guide/lifecycle-hooks @badger2013 What resources have you used to find documentation on ComponentFactory? https://medium.com/@Carmichaelize/angular-2-component-factory-resolver-395acb7c2129 - that was a new one on me. – JGFMK Jul 16 '17 at 09:50
  • Make use of https://angular.io/api/core/OnDestroy – JGFMK Aug 13 '17 at 10:58

1 Answers1

1

You can add a *ngIf in the container of your component and in a base to a condition (ngif) perform the destruction and creation of the child element. Example:

In the view:

<div *ngIf="destroy">
    <component-child></component-child>
</div>
<button (click)="destroyFunction()">Click to Destroy</button>

In the component parent class:

//Declare the view child
@ViewChild(componentChild) componentChild: componentChild;

//Declare the destroy variable
destroy:boolean;

//Add a function to change the value of destroy (boolean)
public destroyFunction(){
    this.destroy = false;
}

Performing these steps you can perform the destruction of the child element. I hope it works for you effectively

jorghe94
  • 169
  • 1
  • 10
  • 1
    I added *ngIf, instead of a property I created a method and my ngIf is on my component tag instead of the div. my components are in mat-tabs. when switching tab, I am setting ngIf accordingly via my function. but when coming back to the tab, I can see the old results. It seems like components are not destroyed this way. – muhammad kashif Sep 15 '19 at 11:48