<p dir="auto">Given the use case of dynamically instantiating content children using the NgFor of NgIf directives I've found this not working in alpha.52. I thought this was working before in alpha.44 but after testing it seems this was never working.</p>
<p dir="auto">I'd expect this to work and I thought this was the reason for content children being represented with a <code class="notranslate">QueryList</code> in the first place.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, Input, NgFor, NgIf} from 'angular2/angular2';

@Component({
  selector: 'child'
  template: `
    &lt;p&gt;{{text}}&lt;/p&gt;
  `
})
export class Child {
  @Input() text;
}

@Component({
  selector: 'parent'
  template: `
    &lt;section&gt;
      &lt;strong&gt;Content children:&lt;/strong&gt;
      &lt;ng-content select=&quot;child&quot;&gt;&lt;/ng-content&gt;
    &lt;/section&gt;
  `
})
export class Parent {}

@Component({
  selector: 'app'
  template: `
    &lt;section&gt;
      &lt;strong&gt;Outside of parent&lt;/strong&gt;
      &lt;child *ngIf=&quot;true&quot; text=&quot;Child in the wild&quot;&gt;&lt;/child&gt;
      &lt;child *ngFor=&quot;#t of text&quot; [text]=&quot;t&quot;&gt;&lt;/child&gt;
    &lt;/section&gt;

    &lt;parent&gt;
      &lt;child *ngIf=&quot;true&quot; text=&quot;Child in the wild&quot;&gt;&lt;/child&gt;
      &lt;child *ngFor=&quot;#t of text&quot; [text]=&quot;t&quot;&gt;&lt;/child&gt;
    &lt;/parent&gt;
  `,
  directives: [Parent, Child, NgFor, NgIf]
})
export class App {
  text = ['Child 1', 'Child 2', 'Child 3']
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">,</span> <span class="pl-v">Input</span><span class="pl-kos">,</span> <span class="pl-v">NgFor</span><span class="pl-kos">,</span> <span class="pl-v">NgIf</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'child'</span>
  <span class="pl-s1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;p&gt;{{text}}&lt;/p&gt;</span>
<span class="pl-s">  `</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Child</span> <span class="pl-kos">{</span>
  @<span class="pl-v">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">text</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'parent'</span>
  <span class="pl-s1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;section&gt;</span>
<span class="pl-s">      &lt;strong&gt;Content children:&lt;/strong&gt;</span>
<span class="pl-s">      &lt;ng-content select="child"&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">    &lt;/section&gt;</span>
<span class="pl-s">  `</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Parent</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'app'</span>
  <span class="pl-s1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;section&gt;</span>
<span class="pl-s">      &lt;strong&gt;Outside of parent&lt;/strong&gt;</span>
<span class="pl-s">      &lt;child *ngIf="true" text="Child in the wild"&gt;&lt;/child&gt;</span>
<span class="pl-s">      &lt;child *ngFor="#t of text" [text]="t"&gt;&lt;/child&gt;</span>
<span class="pl-s">    &lt;/section&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">    &lt;parent&gt;</span>
<span class="pl-s">      &lt;child *ngIf="true" text="Child in the wild"&gt;&lt;/child&gt;</span>
<span class="pl-s">      &lt;child *ngFor="#t of text" [text]="t"&gt;&lt;/child&gt;</span>
<span class="pl-s">    &lt;/parent&gt;</span>
<span class="pl-s">  `</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-v">Parent</span><span class="pl-kos">,</span> <span class="pl-v">Child</span><span class="pl-kos">,</span> <span class="pl-v">NgFor</span><span class="pl-kos">,</span> <span class="pl-v">NgIf</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">App</span> <span class="pl-kos">{</span>
  <span class="pl-c1">text</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'Child 1'</span><span class="pl-kos">,</span> <span class="pl-s">'Child 2'</span><span class="pl-kos">,</span> <span class="pl-s">'Child 3'</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="http://plnkr.co/edit/aUSkWPQmT3XHf6QLqif5?p=preview" rel="nofollow">http://plnkr.co/edit/aUSkWPQmT3XHf6QLqif5?p=preview</a></p>
<p dir="auto">We have a Component template that looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ng-content select=&quot;item-left&quot;&gt;&lt;/ng-content&gt; 
&lt;ion-item-content&gt; 
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/ion-item-content&gt; "><pre class="notranslate"><code class="notranslate">&lt;ng-content select="item-left"&gt;&lt;/ng-content&gt; 
&lt;ion-item-content&gt; 
  &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/ion-item-content&gt; 
</code></pre></div>
<p dir="auto">But if you add <code class="notranslate">*ng-if="true"</code> on the <code class="notranslate">item-left</code> element it places this element inside of the <code class="notranslate">ion-item-content</code> like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ion-item-content&gt;
  &lt;script&gt;&lt;/script&gt;
  &lt;item-left&gt;&lt;/item-left&gt;
&lt;/ion-item-content&gt;"><pre class="notranslate"><code class="notranslate">&lt;ion-item-content&gt;
  &lt;script&gt;&lt;/script&gt;
  &lt;item-left&gt;&lt;/item-left&gt;
&lt;/ion-item-content&gt;
</code></pre></div>
<p dir="auto">Removing the <code class="notranslate">*ng-if</code> places it in the proper place</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;item-left&gt;&lt;/item-left&gt;
&lt;ion-item-content&gt;&lt;/ion-item-content&gt;"><pre class="notranslate"><code class="notranslate">&lt;item-left&gt;&lt;/item-left&gt;
&lt;ion-item-content&gt;&lt;/ion-item-content&gt;
</code></pre></div>
<p dir="auto">Is there something we need to improve for this?</p>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/IgorMinar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/IgorMinar">@IgorMinar</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/adamdbradley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/adamdbradley">@adamdbradley</a></p>