11

I am starting with Angular 2, I have a child component "ChildCmp" initialized and after I need destroy component through a click, let say:

@Component({
selector: 'main-cmp',
templateUrl: './main-cmp.html',
directives: [ChildCmp]
})
class MainCmp {
    @ViewChild(ChildCmp)
    childCmp: ChildCmp;
    destroyChildClick(){
        this.childCmp.destroy();
    }
}

but the previous code doesn't run, destroy() is undefined and exception is:

TypeError: this.childCmp.destroy is not a function

I have read this thread and there are using ViewContainerRef.createComponent(), the component created with this is an instance of "ComponentRef", but the childCmp doesn't have "ComponentRef" implementation.

How I can implement or inject the destroy method?

Thanks for all!

Community
  • 1
  • 1
lextract
  • 148
  • 1
  • 1
  • 8
  • show where and how do you create a component? – micronyks Jul 30 '16 at 18:14
  • 4
    Why destroy when you can just `*ngIf`? – Jack Guy Jul 30 '16 at 18:14
  • 1
    @Harangue I have was creating components dynamically using ViewContainerRef.createComponent(), others are created from template, therefore I am requiring one single form to destroy. – lextract Jul 31 '16 at 04:04
  • @micronyks, ChildCmp doesn't have something special, MainCmp is passed to `bootstrap` method, the only thing that I want is fire events when I destroy component (dispose objects and avoid memory leaks). – lextract Jul 31 '16 at 04:23
  • This way you can't destroy it. you can destroy an instance of a component created with `viewContainerRef.createComponent()`.So again asking how'd you create it? – micronyks Jul 31 '16 at 04:25
  • @micronyks, I am creating components through two ways, one is using html template `` (at the load of page), and two is using `viewContainerRef.createComponent()` (by clicking buttons). – lextract Jul 31 '16 at 07:24
  • I want to destroy `ChildCmp` and host another component `CousinCmp` at the same place, the first `ChildCmp` might be `SonCmp` or any other. – lextract Jul 31 '16 at 07:32
  • If you create it using `viewContainerRef.createComponent()` you can destory it, as already mentioned. See http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 for an example (with Plunker) – Günter Zöchbauer Jul 31 '16 at 12:35
  • @GünterZöchbauer, It's correct, I can destroy component using `ComponentRef.destroy()` and this already done (by clicking buttons), but the first child component (created by template) doesn't have ´destroy()´ – lextract Jul 31 '16 at 16:32
  • That's the point. You can't destroy it. – Günter Zöchbauer Jul 31 '16 at 16:40

1 Answers1

5

Short answer

export class MainCmp {

   @ViewChild(ChildCmp) childRef: ChildCmp;

   destroyClick() {
      this.childRef?.destroy();
   }
}

I know the above code won't make sense in normal scenarios and I wouldn't use it, but since I don't have the context, I answered based on the given question. The parent should check if the child reference is defined first, then it can destroy the child.

Better way is using an NgIf to destroy child component, but again I don't know the context or the use case.

@Component({
  selector: 'main-cmp',
  template: `
    <child-cmp *ngIf="childDestroyed"></child-cmp>
    <button (click)="childDestroyed = true">Destroy child</button>
  `,
})
class MainCmp {
  childDestroyed: boolean;
}
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185
  • 3
    that doesn't make sense. – e-cloud Aug 13 '17 at 07:29
  • I don't think this answers OP's question. Also, what's written here doesn't make sense to me. Child components are destroyed when the parent is destroyed anyway. Regardless of whether `this.childRef.destroy()` works or not, you are basically calling for the child to be destroyed just before it would be destroyed anyway. – freethebees Sep 11 '17 at 13:06
  • @freethebees No body said that you need to destroy the child manually, but one may want to destroy the child for so many different use cases. What if you want to keep the parent and destroy the child? – Murhaf Sousli Sep 11 '17 at 13:10
  • @MurhafSousli OP asked to destroy the child manually: "destroy component through a click". If you are implying that your code allows you to keep the parent and destroy the child, I disagree. Your code runs `this.childRef.destroy()` only when `MainCmp` is destroyed. – freethebees Sep 11 '17 at 13:41
  • 2
    I just renamed `ngOnDestroy()` to `destroyClick()` the important part is how to destroy it manually from the component code – Murhaf Sousli Sep 11 '17 at 13:47
  • Guys it doesn't make sense to me either, and I won't use this way... I would use `NgIf`, however this just answers the question – Murhaf Sousli Nov 09 '21 at 18:11