3

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?

Алексей Серафимов
  • 31
  • 1
  • 1
  • 3
  • The answer: [http://stackoverflow.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angula](http://stackoverflow.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angula) – Алексей Серафимов Feb 16 '16 at 08:12
  • 1
    Possible duplicate of [How to destroy all the Components created using DynamicComponentLoader in angular2?](http://stackoverflow.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angula) – nycynik Feb 27 '17 at 17:33

1 Answers1

6
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);
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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. – Алексей Серафимов Feb 15 '16 at 17:48
  • 4
    @АлексейСерафимов: You could use the approach described in http://stackoverflow.com/q/34093670/4715679 – i.e.: pass a reference to the `ComponentRef` to the created component and invoke the `dispose()` method on it. – BlueM Feb 19 '16 at 13:47
  • I was wondering if .remove() is the same as display: none or just removes a rendered element – Mese May 15 '17 at 11:20
  • 1
    @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()`. – Günter Zöchbauer May 15 '17 at 11:25