Angular 2 @ViewChild annotation returns undefined
<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>