Angular2 Destroy Current Component Completely

Question

I tried searching google and stackoverflow but could not find an answer. So my question is simple "How can i remove current component in angular 2, 4"

example:

<div (click)="remove($event)">Remove Current Component</div>

remove($event) {
    // this.destroy() ????
}

Basically what i want is ComponentRef see this answer ngOnDestroy() which calls this.cmpRef.destroy() :

ngOnDestroy() {
   if(this.cmpRef) {
     this.cmpRef.destroy();
   }    
}

But he is getting the ComponentRef due to dynamically creating the component.

Answer 1

You can use a *ngIf="myBoolean" directive on the component element in the parent template. When myBoolean becomes false , the component will be destroyed.

No more component or DOM element present. (and ngOnDestroy event raised)

If myBoolean becomes true again, a new component will be instantiated.

A new one will appear in DOM (and ngOnInit event raised)

Your click event can emit an event (binded in the parent with the (myEventEmitter) syntax, and a method in the parent component can then just set the boolean to false .

Demonstration on this Plunker . If it doesn't suit your need, consider editing your question to provide more specific details, including a Minimal Complete Verifiable example