Angular 2 bind transcluded content to loop variable
<p>I'm trying to bind transcluded content to a variable inside of a component loop but I'm unable to do so. </p>

<p>I've looked at the PrimeNG's <code>dropdown</code>component and they use the <code>template</code> tag along with <code>let-car</code> to bind to the <code>car</code> variable of the loop. </p>

<p>However when I try this I can't even get the content to transclude. What is the correct way of achieving this?</p>

<p>Attempts:</p>

<pre><code>&lt;!-- Obviously not gonna work --&gt;
&lt;comp&gt;
  &lt;span&gt;{{option.name}}, {{option.type}}&lt;/span&gt;
&lt;/comp&gt;

&lt;!-- Thought this would work but it doesn't, in odd scenarios I get the last element of the loop to transclude content and bind correctly. --&gt;
&lt;comp&gt;
  &lt;template let-option&gt;
    &lt;span&gt;{{option.name}}, {{option.type}}&lt;/span&gt;
  &lt;/template&gt;
&lt;/comp&gt;
</code></pre>

<p>In component:</p>

<pre><code>&lt;ul&gt;
  &lt;li *ngFor="let option of options"&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Simple plunkr of what I'm trying to achieve:</p>

<p><a href="https://plnkr.co/edit/6SS03fuXmbvJB4nmf1AO?p=preview" rel="noreferrer">https://plnkr.co/edit/6SS03fuXmbvJB4nmf1AO?p=preview</a></p>