How to remove component from DOM?

Question

I am wondering how I can remove my component form DOM manually? I've been looking at ElementRef, and found some work arounds there, but I've been wondering if there is any function dedicated to do this?

My set up is the following:

I've got a Loader component, that is called via EventEmitter. I am adding it to a view by DynamicComponentLoader.loadNextToLocation(..), and then I want to remove it from the view.

I've also found Renderer.destroyView(component), but this yields me to errors.

Thanks

Please share more information. What kind of element do you want to remove from where? — Günter Zöchbauer, Apr 11 '16 at 06:54

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
  this.cmpRef = cmpRef;
});

then remove it with:

this.cmpRef.dispose();

See also Angular 2 dynamic tabs with user-click chosen components

edited May 23 '17 at 11:47

Community

1
1

answered Apr 11 '16 at 06:59

Günter Zöchbauer

623,577
216
2,003
1,567

score -1 · Answer 2 · edited Apr 11 '16 at 07:20

-1

you can use *ngIfof angular2 which will added the Element to DOM if condition result is true, In case of results False it does't allow to render the Element on DOM

edited Apr 11 '16 at 07:20

Pardeep Jain

84,110
37
165
215

answered Apr 11 '16 at 06:59

akhil viswam

496
9
24

I don't think this is a valid solution because I think meanwhile the component is checking for the *ngIf condition to be true it is still loaded into memory and using resources. I guess this question is about how to destroy the component, not just to make it not visible. – Osakr Nov 08 '18 at 10:37

How to remove component from DOM?

2 Answers2