I have a service, which create new blade and save it in blades array. I show this blade using "DynamicComponentLoader". Now i want to delete my blade, from another blade. But how i can do that?
2
-
The answer: http://stackoverflow.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angulaАлексей Серафимов– Алексей Серафимов2016-02-16 08:12:51 +00:00Commented Feb 16, 2016 at 8:12
-
1Possible duplicate of How to destroy all the Components created using DynamicComponentLoader in angular2?nycynik– nycynik2017-02-27 17:33:01 +00:00Commented Feb 27, 2017 at 17:33
Add a comment
|
1 Answer
export class YourComponent {
constructor(private ref:ElementRef) {}
someFunc() {
elementRef.nativeElement.querySelector('some-elem').destroy();
}
}
You could also use a wrapper element
<div #wrapper><dynamic-component></dynamic-component>
then use
@ViewChild('wrapper') wrapper;
...
someFunc() {
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
answered Feb 15, 2016 at 14:59
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
4 Comments
Алексей Серафимов
Thanks, Günter Zöchbauer. But this is delete from DOM. For example, if i have ngOnDestroy() in component, it doesnt perform. Angular dont know that the component was deleted.
BlueM
@АлексейСерафимов: You could use the approach described in stackoverflow.com/q/34093670/4715679 – i.e.: pass a reference to the
ComponentRef to the created component and invoke the dispose() method on it.
Mese
I was wondering if .remove() is the same as display: none or just removes a rendered element
Günter Zöchbauer
@Mese
display: none and remove() (now destroy()) are entirely different. display: none is CSS only and just makes the host element invisible and can made be visible by for example setting display: block, while destroy() destroys the component, removes the host element from the DOM and only can be re-added by using ViewContainerRef.createComponent().