title: Angular2 pass dynamic content to a component
body: <p>I have a <code>ListComponent</code> that basically loops on an array of objects with <code>ngFor</code> + some functionality.</p>
  
  <p>I would like to be able to pass different 'item' components as <strong>content</strong> of the <code>ListComponent</code> like this:</p>
  
  <pre><code>&lt;list-component&gt;
      &lt;item-component [SomeInput]="someInput"&gt;
          &lt;some-content&gt;&lt;/some-content&gt;
      &lt;/item-component&gt;
  &lt;/list-component&gt;
  </code></pre>
  
  <p>and in another place:</p>
  
  <pre><code>&lt;list-component&gt;
       &lt;different-item-component [SomeInput]="someInput"&gt;
           &lt;some-content&gt;&lt;/some-content&gt;
       &lt;/different-item-component&gt;
  &lt;/list-component&gt;
  </code></pre>
  
  <p>and then in my <code>ListComponent</code></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let item of items"&gt;
          &lt;!-- ng-content can be different item components --&gt;
          &lt;ng-content [Item]="item" &gt;&lt;/ng-content&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I know that <code>ng-content</code> is static and the item can't be passed as input. (It's just to illustrate the wanted behavior...)</p>
  
  <p>I've tried to achieve this using <code>template</code> and <code>TemplateRef</code> like in this <a href="https://stackoverflow.com/a/42538927/4610489">answer</a></p>
  
  <p>but it only works if I place the <code>template</code> tag directly inside the <code>&lt;list-component&gt;</code> <strong>doesn't work</strong> if I place the <code>template</code> inside the <code>item-component</code>'s template and use it as above.</p>
  
  <p>How can I make it work or is there a different way to achieve this?</p>