<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently when I try to reuse the same <code class="notranslate">TemplateRef</code> instance for multiple items it renders wrong view</p>
<p dir="auto"><strong>Expected behavior</strong><br>
It should render a separate view inside each view container</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://plnkr.co/edit/PZe5XnmJ2KoJ99ts33F9?p=preview" rel="nofollow">https://plnkr.co/edit/PZe5XnmJ2KoJ99ts33F9?p=preview</a></p>
<p dir="auto">Currently you will see 2 words "Enabled".<br>
Should be "<br>
{ "enabled": true } Enabled<br>
{ "enabled": false } disabled" (as in <a href="https://plnkr.co/edit/rZuCs8O7YE4fYplfI3gF?p=preview" rel="nofollow">https://plnkr.co/edit/rZuCs8O7YE4fYplfI3gF?p=preview</a>)</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I have a slider with hundreds of slides and want to optimise DOM by using lazy DOM creation. For this I need to use template reference. Eventually it's something like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;lazy-slides [items]=&quot;files&quot;&gt;
   &lt;template let-file=&quot;item&quot;&gt;
       &lt;preview-file [src]=&quot;file.url&quot;&gt;&lt;/preview-file&gt;
   &lt;/template&gt;
&lt;/lazy-slides&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">lazy-slides</span> <span class="pl-c1">[items]</span>="<span class="pl-s">files</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">let-file</span>="<span class="pl-s">item</span>"<span class="pl-kos">&gt;</span>
       <span class="pl-kos">&lt;</span><span class="pl-ent">preview-file</span> <span class="pl-c1">[src]</span>="<span class="pl-s">file.url</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">preview-file</span><span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">lazy-slides</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Then using <code class="notranslate">ngFor</code> and <code class="notranslate">ngTemplateOutlet</code> I put this template for first 5 items and when user slides I change references inside array.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
npm: 3.9.3<br>
OSX EI Capitan 10.11.5<br>
Atom<br>
Chrome 54.0.2840.98</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Reproducible starting from 2.2.0, the same in 2.3.0. Works properly in 2.2.0-rc.0 and older ( <a href="https://plnkr.co/edit/rZuCs8O7YE4fYplfI3gF?p=preview" rel="nofollow">https://plnkr.co/edit/rZuCs8O7YE4fYplfI3gF?p=preview</a> )</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
Chrome 54.0.2840.98</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">Currently when you have <code class="notranslate">ContentChild(TemplateRef)</code> it is not working correctly. Because after init you get different TemplateRef object as you get after another ContentCheck.</p>
<p dir="auto">If you have following html</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;grabber&gt;
    &lt;template&gt;
        &lt;div style=&quot;background-color: #FF00FF;&quot;&gt;
            &lt;span&gt;ok&lt;/span&gt;
            &lt;div style=&quot;background-color: #00FFFF;&quot; *ngIf=&quot;true&quot;&gt;bad&lt;/div&gt;
        &lt;/div&gt;
    &lt;/template&gt;
&lt;/grabber&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">grabber</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">background-color: #FF00FF;</span>"<span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>ok<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">background-color: #00FFFF;</span>" <span class="pl-c1">*ngIf</span>="<span class="pl-s">true</span>"<span class="pl-kos">&gt;</span>bad<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">grabber</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">If your <code class="notranslate">grabber</code> component have <code class="notranslate">@ContentChild(TemplateRef)</code> and in <code class="notranslate">ngAfterContentInit()</code> method you will use this template, <code class="notranslate">&lt;template&gt;</code> element is used.</p>
<p dir="auto">But if you use this template again, not during <code class="notranslate">ngAfterContentInit()</code> method call you get <code class="notranslate">&lt;div style="background-color: #00FFFF;" *ngIf="true"&gt;bad&lt;/div&gt;</code> template.</p>
<p dir="auto">This is pretty awfull bug.<br>
Thanks for help</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">It should return same template during init phase and also after another check of content. And also there is no explaination why <code class="notranslate">descendants: true</code> were set. This means that correct template in this case is div? If so, then during init phase this is not considered.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Here is plunker where you can see problem described above. <a href="https://plnkr.co/edit/FWqPGlsENMJZHhD4SOCd?p=preview" rel="nofollow">https://plnkr.co/edit/FWqPGlsENMJZHhD4SOCd?p=preview</a></p>
<p dir="auto">If you add another template you see only <code class="notranslate">&lt;div&gt;</code> element.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, Visual Studio Code, npm, Connect server</p>
<ul dir="auto">
<li><strong>Angular version:</strong> &gt;= 2.2.0</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> all</li>
</ul>

<ul dir="auto">
<li><strong>Language:</strong> TypeScript 2.0.9</li>
</ul>