<p dir="auto">Hi,</p>
<p dir="auto">I'm trying to make a component where I want to reuse the same projected 'ng-content' but it doesn't seem to be possible. It would be nice if angular could iterate through all the unnamed ng-contents and replace them.</p>
<p dir="auto">Here is a use case example.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'wt-link',
  template: `
&lt;a *ngIf=&quot;!isRouteActive() [routerLink]=&quot;routerLink&quot;&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/a&gt;
&lt;div *ngIf=&quot;isRouteActive()&quot;&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
`
})
class LinkComponent {
  ...
}"><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'wt-link',
  template: `
&lt;a *ngIf="!isRouteActive() [routerLink]="routerLink"&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/a&gt;
&lt;div *ngIf="isRouteActive()"&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
`
})
class LinkComponent {
  ...
}
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;wt-link [routerLink]=...&gt;My Link Name&lt;/wt-link&gt;"><pre class="notranslate"><code class="notranslate">&lt;wt-link [routerLink]=...&gt;My Link Name&lt;/wt-link&gt;
</code></pre></div>
<p dir="auto">The link is displayed in another way if the route is active and I want more changes than simple CSS.</p>
<p dir="auto">Is there any workaround?</p>
<p dir="auto">version: <code class="notranslate">ng2-beta12</code><br>
For some reason the order in which templates are defined is causing issues with transclusion.</p>
<p dir="auto"><a href="http://plnkr.co/edit/OmMGa65bNfrrQn0i5Wwm?p=preview" rel="nofollow">Doesn't Work for buttons but works for link</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template [ngIf]=&quot;href ===''&quot;&gt;
    &lt;button [ngClass]=&quot;cssClassList&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
&lt;template [ngIf]=&quot;href !==''&quot;&gt;
    &lt;a [ngClass]=&quot;cssClassList&quot; href=&quot;href&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template [ngIf]="href ===''"&gt;
    &lt;button [ngClass]="cssClassList"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
&lt;template [ngIf]="href !==''"&gt;
    &lt;a [ngClass]="cssClassList" href="href"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2133184/14080610/46e6e0a0-f4d4-11e5-9317-4acd79f61101.png"><img src="https://cloud.githubusercontent.com/assets/2133184/14080610/46e6e0a0-f4d4-11e5-9317-4acd79f61101.png" alt="screen shot 2016-03-28 at 10 59 34 am" style="max-width: 100%;"></a></p>
<p dir="auto"><a href="http://plnkr.co/edit/ccpnmdnU53B5JqZMBnxP?p=preview" rel="nofollow">Works for buttons but not for links</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template [ngIf]=&quot;href !==''&quot;&gt;
    &lt;a [ngClass]=&quot;cssClassList&quot; href=&quot;href&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
&lt;template [ngIf]=&quot;href ===''&quot;&gt;
    &lt;button [ngClass]=&quot;cssClassList&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template [ngIf]="href !==''"&gt;
    &lt;a [ngClass]="cssClassList" href="href"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
&lt;template [ngIf]="href ===''"&gt;
    &lt;button [ngClass]="cssClassList"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2133184/14080621/57ccd636-f4d4-11e5-8f57-e5c8fbb856ee.png"><img src="https://cloud.githubusercontent.com/assets/2133184/14080621/57ccd636-f4d4-11e5-8f57-e5c8fbb856ee.png" alt="screen shot 2016-03-28 at 10 59 46 am" style="max-width: 100%;"></a></p>