title: ngIf container breaks async ngFor
body: <p>I'm experiencing some unexpected behaviour in Angular2 when I wrap an <code>ngIf</code> container around a list created using <code>ngFor</code>. It appears as though the view doesn't render items in the observable array the first time they are inserted after the <code>ngIf</code> container becomes visible.</p>
  
  <p>Please see the <a href="https://plnkr.co/edit/M1CG9VzAxhVxh6hYOazg?p=preview" rel="nofollow">plunker demo</a> that demonstrates this unexpected behaviour. I am expecting that the first example would show <em>banana</em> at the same time <em>Loaded</em> appears.</p>
  
  <p><em>Am I doing something stupid or is this a rendering bug?</em> </p>
  
  <hr>
  
  <p><kbd>
  <a href="https://plnkr.co/edit/M1CG9VzAxhVxh6hYOazg?p=preview" rel="nofollow">Plunker demo</a>
  </kbd></p>
  
  <p><em>app.service.ts</em></p>
  
  <pre><code>export class AppService {
    private _things = new Subject&lt;Array&lt;any&gt;&gt;();
      public things = this._things.asObservable();
  
    constructor() {
      var that = this;
  
      // simulate ajax request
      setTimeout(function() {
        that._things.next([
            {'id': 1, 'text': 'banana'}
          ]);
      }, 3000);
  
      setTimeout(function() {
        that._things.next([
          {'id': 1, 'text': 'banana'},
          {'id': 2, 'text': 'orange'}
        ]);
      }, 6000);
  
      setTimeout(function() {
        that._things.next([
          {'id': 1, 'text': 'banana'},
          {'id': 2, 'text': 'orange'},
          {'id': 3, 'text': 'apple'}
        ]);
      }, 9000);
    }
  }
  </code></pre>
  
  <p><em>app.ts</em></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;h4&gt;Does have *ngIf&lt;/h4&gt;
      &lt;div *ngIf="hasThings"&gt;
        Loaded
        &lt;ul&gt;
          &lt;li *ngFor="let thing of things | async"&gt;
            {{thing.id}}: {{thing.text}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;h4&gt;Doesn't have *ngIf&lt;/h4&gt;
      &lt;div&gt;
        Loaded
        &lt;ul&gt;
          &lt;li *ngFor="let thing of things | async"&gt;
            {{thing.id}}: {{thing.text}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    `,
    directives: [NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
  })
  export class App implements OnInit {
    public hasThings = false;
  
    private _things = new Subject&lt;Array&lt;any&gt;&gt;();
    public things = this._things.asObservable();
  
    constructor(private _appService: AppService) {
    }
  
    ngOnInit() {
      this._appService.things
        .subscribe(things =&gt; {
          this.hasThings = things.length &gt; 0;
          this._things.next(things);
        });
    }
  }
  </code></pre>