title: Angular: Cloning ng-content elements and it's functionality
body: <p>I'm trying to clone the <code>ng-content</code> items of a component along with any functionality added on the HTML of that content. For example, the markup using the component might look like this:</p>
  
  <pre><code>&lt;custom-component&gt;
    &lt;button (click)="doAThing();"&gt;A button&lt;/button&gt;
  &lt;/custom-component&gt;
  </code></pre>
  
  <p>Then I set up my template for custom-component like so:</p>
  
  <pre><code>&lt;ng-template #content&gt;
    &lt;ng-conent&gt;&lt;/ng-content&gt;
  &lt;/ng-template&gt;
  &lt;ng-template *ngTemplateOutlet="content"&gt;&lt;/ng-template&gt;
  &lt;div class="second-area&gt;
    &lt;ng-template *ngTemplateOutlet="content"&gt;&lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My expectation would be that the <code>ng-content</code> would get duplicated into both <code>ngTemplateOutlet</code> areas. What happens is that it pushes to the last outlet and ignores the first. This markup will duplicate normal markup just fine, but ng-content only move to one outlet.</p>
  
  <p>Is this not possible with this technique, am I missing something obvious, or it there another way to clone the contents of <code>ng-content</code> along with any events attached to it?</p>