title: Angular 2 manipulate DOM - move component from one place to another while preserving functions
body: <p>Ok so I have:</p>
  
  <pre><code>&lt;div class="full"&gt;&lt;/div&gt;
  &lt;div class="grid&gt;
      &lt;div class="widget"&gt;&lt;widget1&gt;&lt;/widget1&gt;&lt;/div&gt;
      &lt;div class="widget"&gt;&lt;widget2&gt;&lt;/widget2&gt;&lt;/div&gt;
      &lt;div class="widget"&gt;&lt;widget3&gt;&lt;/widget2&gt;&lt;/div&gt;
      &lt;div class="widget"&gt;&lt;widget4&gt;&lt;/widget2&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each widget is a component, that has a button with:</p>
  
  <pre><code>&lt;div class="resize" (click)="resize($elem)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, when the user clicks on the resize button on each of the components, I want that component to be moved on the div with the class full, and removed from the grid, and when clicked on the maximized one, but back in it's place and removed from the full div.</p>
  
  <p>I need this with pure javascript.</p>