title: angular dynamic view child in ngFor
body: <p>I'm trying to get the component instance using <code>@ViewChild</code> which is in <code>ngFor</code> of ng-bootstrap tabs, however I'm only getting the first component instance even though I'm changing the tabs along with <code>component</code> and its <code>inputs</code>.</p>
  <h3>Update</h3>
  <p>I even tried with `@ViewChildren' but i'm getting inconsistent results.</p>
  <p>Please see the <a href="http://plnkr.co/edit/efHibA?p=preview" rel="nofollow noreferrer">Plunker2</a> for the how it is behaving.</p>
  <p>Is there anyway I can access the particular component instance in <code>ngFor</code> or am I missing something?</p>
  <h3>Version information:</h3>
  <p>Angular: 2.4.0;<br />
  ng-bootstrap: 1.0.0-alpha.20</p>
  <h3>Component:</h3>
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;ngb-tabset (tabChange)=&quot;tabChanged($event)&quot;&gt;
        &lt;ngb-tab *ngFor=&quot;let item of tabs;let tIdx = index;&quot; [title]=&quot;item.slice(0,10)&quot;&gt;
          &lt;template ngbTabContent&gt;
            &lt;app-grid [content]=&quot;item&quot; #grid&gt;&lt;/app-grid&gt;
          &lt;/template&gt;
        &lt;/ngb-tab&gt;
      &lt;/ngb-tabset&gt;
    `
  })
  
  export class App {
    @ViewChild('grid') grid: GridComponent;
    tabs=[
      `Raw denim you probably haven't heard of them jean shorts Austin.`,
        `Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.`,
        `Mustache cliche tempor, williamsburg carles vegan helvetica.`]
    tabChanged(event){
      debugger;
      console.log(this.grid);
      alert(this.grid.content);
    }
  }  
  </code></pre>
  <h3>Demo</h3>
  <p><a href="http://plnkr.co/edit/A3YnV1?p=preview" rel="nofollow noreferrer">Plunker</a><br />
  <a href="http://plnkr.co/edit/efHibA?p=preview" rel="nofollow noreferrer">Plunker2</a></p>