title: Angular 2 @ViewChild annotation returns undefined
body: <p>I am trying to learn Angular 2.</p>
  <p>I would like to access to a child component from a parent component using the <strong>@ViewChild</strong> Annotation.</p>
  <p>Here some lines of code:</p>
  <p>In <em><strong>BodyContent.ts</strong></em> I have:</p>
  <pre><code>import { ViewChild, Component, Injectable } from 'angular2/core';
  import { FilterTiles } from '../Components/FilterTiles/FilterTiles';
  
  @Component({
      selector: 'ico-body-content',
      templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html',
      directives: [FilterTiles] 
  })
  export class BodyContent {
      @ViewChild(FilterTiles) ft: FilterTiles;
  
      public onClickSidebar(clickedElement: string) {
          console.log(this.ft);
          var startingFilter = {
              title: 'cognomi',
              values: [ 'griffin', 'simpson' ]
          }
          this.ft.tiles.push(startingFilter);
      } 
  }
  </code></pre>
  <p>while in <em><strong>FilterTiles.ts</strong></em>:</p>
  <pre><code> import { Component } from 'angular2/core';
  
   @Component({
       selector: 'ico-filter-tiles',
       templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
   })
   export class FilterTiles {
       public tiles = [];
  
       public constructor(){};
   }
  </code></pre>
  <p>Finally here the templates (as suggested in comments):</p>
  <p><em><strong>BodyContent.html</strong></em></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div (click)=&quot;onClickSidebar()&quot; class=&quot;row&quot; style=&quot;height:200px; background-color:red;&quot;&gt;
      &lt;ico-filter-tiles&gt;&lt;/ico-filter-tiles&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em><strong>FilterTiles.html</strong></em></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Tiles loaded&lt;/h1&gt;
  &lt;div *ngFor=&quot;#tile of tiles&quot; class=&quot;col-md-4&quot;&gt;
       ... stuff ...
  &lt;/div&gt;
  </code></pre>
  
  <p>FilterTiles.html template is correctly loaded into  <strong>ico-filter-tiles</strong> tag (indeed I am able to see the header).</p>
  <p>Note: the <code>BodyContent</code> class is injected inside another template (Body) using <code>DynamicComponetLoader: dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector)</code>:</p>
  <pre><code>import { ViewChild, Component, DynamicComponentLoader, Injector } from 'angular2/core';
  import { Body } from '../../Layout/Dashboard/Body/Body';
  import { BodyContent } from './BodyContent/BodyContent';
  
  @Component({
      selector: 'filters',
      templateUrl: 'App/Pages/Filters/Filters.html',
      directives: [Body, Sidebar, Navbar]
  })
  export class Filters {
  
      constructor(dcl: DynamicComponentLoader, injector: Injector) {
         dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector);
         dcl.loadAsRoot(SidebarContent, '#ico-sidebarContent', injector);
     } 
  }
  </code></pre>
  <p>The problem is that when I try to write <code>ft</code> into the console log, I get <code>undefined</code>, and of course I get an exception when I try to push something inside the &quot;tiles&quot; array: <em>'no property tiles for &quot;undefined&quot;'</em>.</p>
  <p>One more thing: <code>FilterTiles</code> component seems to be correctly loaded, since I'm able to see the html template for it.</p>
  <p>Any suggestions?</p>