19

I want to be able to destroy my component from within itself. (Not from parent since it's dynamically created in multiple areas).

I've read from angular's api that they have a ComponentRef object. I've tried including it in the constructor but it says it needs an argument and I'm not sure what to pass to it.

Link: https://angular.io/api/core/ComponentRef

How can use ComponentRef in my component to destroy it?

import { Component, ComponentRef, OnInit } '@angular/core';
export class MyComponent implements OnInit {
    constructor(private ref: ComponentRef) {}

    ngOnInit() {
        this.ref.destroy()
    }
}
Jonathan002
  • 9,639
  • 8
  • 37
  • 58
  • 2
    You are not supposed to destroy a component yourself. Angular does that for you. An exception are components created by yourself. What's the purpose anyway? – Günter Zöchbauer Aug 18 '17 at 13:27
  • I have a very delicate project that creates this component for animation purposes. The component already tries to remove itself from routing, although I'm worried there might be some scenarios where it is created without routing instructions. In this case I hope to have the component destroy itself.. – Jonathan002 Aug 18 '17 at 13:35
  • 2
    If you create it yourself, you can destroy it yourself. That's also what the `` does. See https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 for an example (or check the `RouterOutlet` component source) – Günter Zöchbauer Aug 18 '17 at 13:39
  • yeah, you can read this article [Here is what you need to know about dynamic components in Angular](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e) to understand where `componentRef` is used – Max Koretskyi Aug 18 '17 at 14:45
  • The destroy trigger should come from the parent or from the component itself? – YaakovHatam Dec 10 '19 at 14:01
  • `ngOnDestory` is a lifecycle hook that get's called, when the component is removed from the DOM. It wouldn't make any sense to manually destroy a component, that is still present in the DOM and should therefore not be destroyed. Thus, if you want it to be destroyed, you should remove it from the DOM. – naeramarth7 Dec 13 '19 at 22:03
  • Does this answer your question? [Can component invoke a self destroy event](https://stackoverflow.com/questions/39764546/can-component-invoke-a-self-destroy-event) – GCSDC Mar 22 '20 at 22:11

3 Answers3

1

you can do it like this:


export class SelfDestroyableComponent implements OnInit {

    constructor(private host: ElementRef<HTMLElement>) {}

    // whatEver function name you want to give 
    selfDestroy() {
        this.host.nativeElement.remove();
    }

}

and call selfDestroy method whenever you want to destroy component

babak.jalilian
  • 11
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 28 '21 at 08:27
0

What I can think of is, let's say you have the destroy method in the parent and call that method in this child using the Event Emitter.

Bidisha Das
  • 252
  • 2
  • 14
-1

This is useful when you instanciate the component form another one (parent).

You can try to call the ngOnDestroy() from the component obejct this.ngOnDestroy().

If the Angular version you're working on doesn't let you and since you want to destroy it from the same component you'll need to ask the parent to do it usint an output and/or emmiter.

alexOtano
  • 140
  • 1
  • 13