title: How do you render ContentChildren elements in an ng-template?
body: <p>Given a component, I wish to wrap the rendered child elements in it. </p>
  
  <p>How is this possible in angular2?</p>
  
  <p>For example, I have this component:</p>
  
  <pre><code>export class InnerTestComponent implements OnInit {
    @ContentChildren('link') contents: QueryList&lt;ElementRef&gt;;
  }
  </code></pre>
  
  <p>and this template:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h3&gt;Children test: {{ contents.length }} to render&lt;/h3&gt;
    &lt;div *ngFor="let child of contents"&gt;
      &lt;ng-container *ngTemplateOutlet="someTemplateName; context: {child: child}"&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ng-template #someTemplateName let-child="child"&gt;
    &lt;h3&gt;Child&lt;/h3&gt;
    &lt;div&gt;
      {{ child }}
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>And when I call:</p>
  
  <pre><code>&lt;templates-inner-test&gt;
    &lt;a #link href="#"&gt;Test1&lt;/a&gt;
    &lt;a #link href="#"&gt;Test2&lt;/a&gt;
  &lt;/templates-inner-test&gt;
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>&lt;templates-inner-test&gt;
  &lt;div&gt;
    &lt;h3&gt;Children test: 2 to render&lt;/h3&gt;
    &lt;h3&gt;Child&lt;/h3&gt;
    &lt;div&gt;
      [object Object] &lt;--- WRONG
    &lt;/div&gt;
    &lt;/div&gt;&lt;div&gt;
    &lt;h3&gt;Child&lt;/h3&gt;
    &lt;div&gt;
      [object Object] &lt;--- WRONG
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/templates-inner-test&gt;
  </code></pre>
  
  <p>When what I want is:</p>
  
  <pre><code>&lt;h3&gt;Child&lt;/h3&gt;
  &lt;div&gt;
    &lt;a href="#"&gt;Test1&lt;/a&gt;
  &lt;/div&gt;
  &lt;h3&gt;Child&lt;/h3&gt;
  &lt;div&gt;
    &lt;a href="#"&gt;Test2&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I appreciate rendering an <code>ElementRef</code> in <code>{{ ... }}</code> simply executes <code>toString()</code> on it, but what should I be doing instead?</p>
  
  <p>I would like to also specifically point out that the solutions floating around in various places to use the <code>&lt;ng-content select="child"&gt;&lt;/ng-content&gt;</code> flat out don't work. That just renders an empty <code>&lt;div&gt;</code>.</p>