title: Angular 4 - ngOnDestroy not being called when removing component via renderer2
body: <p>I am dynamically inserting Angular components using renderer2 and elementRef. While that works, I have a problem that upon removing the component (either by removing the parent component, or by calling removeChild on renderer2), the component's ngOnDestroy method is not called.</p>
  
  <p>You can see example here, <a href="https://stackblitz.com/edit/angular4-hs37d2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular4-hs37d2</a></p>
  
  <p><em>(The code that's doing inserting and removing components is located in el-render.directive.ts)</em></p>
  
  <pre><code>public ngAfterContentInit() {
    console.log('[ElRenderDirective] ngAfterContentInit');
    this.renderer.appendChild(this.element.nativeElement, this.elRender.nativeElement);
  }
  
  public ngOnDestroy() {
    console.log('[ElRenderDirective] ngOnDestroy');
    this.renderer.removeChild(this.element.nativeElement, this.elRender.nativeElement);
  }
  </code></pre>
  
  <p>Notice that for example the code
  <code>console.log('[FirstElComponent] ngOnDestroy')</code> is never executed. Which is a problem, as there are some components which needs to be notified about no longer being in DOM.</p>
  
  <p>How can I manually insert component into DOM, so removing it will call ngOnDestroy?</p>