title: Moving a component to another parent component in Angular
body: <p>This question is the Angular version of <a href="https://stackoverflow.com/questions/324303/cut-and-paste-moving-nodes-in-the-dom-with-javascript">this question</a>.</p>
  
  <p>The following snippet summarizes my first attempt:</p>
  
  <pre><code>class NewParentComponent {
  
    constructor(elRef: ElementRef) {
      elRef.nativeElement.appendChild(myMovableElement);
      // where the reference to myMovableElement may come from a service.
    }
  }
  </code></pre>
  
  <p>This attempt comes with the following issues:</p>
  
  <ol>
  <li>We are not supposed to manipulate the DOM directly in Angular. Is moving a component achievable with the <code>Renderer</code> somehow? (Ans: Per <a href="https://stackoverflow.com/a/45071184/3634032">cgTag's answer</a>, use <a href="https://angular.io/api/core/Renderer2" rel="noreferrer">Renderer2</a>).</li>
  <li>If the original parent component gets destroyed after the child component was moved, the <code>ngOnDestroy</code> method is called on the child component.</li>
  </ol>
  
  <p>See <a href="https://embed.plnkr.co/5FQ472Dhgf7QXYKx28sv/" rel="noreferrer">this Plunker</a> demonstrating the issue. This Plunker is built on top of the <a href="https://angular.io/guide/dynamic-component-loader" rel="noreferrer">Angular Dynamic Component Loader example</a>. Open the browser console log and note that the "destroyed!" text is logged every time the ad banner changes, even when the "Drag Me!" text was dragged into the drop box.</p>