Destroy component itself about angular HOT 5 OPEN

I would be nicer if we have some sort of function to do it, since I noticed this feature has been already requested #18673, the suggestion provided on this #18673 (comment) actually doesn't work as I imagine it.

As mentioned, it's important for the component to be hosted within its own embedded view, as otherwise you're killing a component that is still being attached from its parent view, breaking the parent view in the process (and there wouldn't be a way for the parent view to reinstantiate the component).

from angular.

To add to @JoostK comment - it is really about the mental model of Angular that:

• requires a host element to attach directives / components;
• assumes that a view is a fixed structure (in terms of DOM nodes and directives / components).

If we take those two very fundamental decisions into account there is no real concept of destroying "self":

• a component doesn't own its host node so it couldn't be removed from the DOM anyway;
• a component instance can be referenced by other components / directives (ex.: local references, DI, queries) and others might hold onto those instances - what should happen if / when we destroy such component?

from angular.

You can achieve it using e.g. the pattern implemented by DialogRef, see #18673 (comment). Then the component is indeed destroyed from the parent, but the DialogRef service can be requested by descendant components to cause their parent to close.

from angular.

So in order to destroy a component, should I destroy it from the parent component programmatically ?
because I found some resources says in order to destroy a component, it needs to be created using ViewContainerRef in order to destroy it when needed.
@JoostK , @pkozlowski-opensource

from angular.

@cl-yklilich Use top-down flow control - parents control children, not other way around
( unless you want your kids to become despots and tyrants when they grow up ;-) )

Parent component creates your component, updates inputs, and destroys / re-creates it.

So in parent component should have isOpen boolean flag and create child like this:

@if( isChildOpen == true ) { <app-child-component (close)="isChildOpen = false"  /> }

or if using older version:

 <app-child-component (close)="isOpen = false" *ngIf="isChildOpen == true"  /> }

then the child can emit close signal and ask parent politely to destroy this child.:
from child:

class ChildComponent{

   @Output() close = new EventEmitter()   // or // close = output();
   
   closeBtnClick(){ 
        this.close.emit(true) 
   }
}

from angular.