Andrea Ialenti Andrea Ialenti - 8 months ago 1424
TypeScript Question

Angular 2 @ViewChild annotation returns undefined

I am trying to learn how to build applicatioon by using Angular 2.

I would like to access to a child component from a parent component by using the @ViewChild Annotation.

Here some line of code:

In BodyContent.ts I have:

import {ViewChild, Component, Injectable} from 'angular2/core';
import {FilterTiles} from '../Components/FilterTiles/FilterTiles';

selector: 'ico-body-content'
, templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html'
, directives: [FilterTiles]

export class BodyContent {
@ViewChild(FilterTiles) ft:FilterTiles;

public onClickSidebar(clickedElement: string) {
var startingFilter = {
title: 'cognomi',
values: [
, 'simpson'

while in FilterTiles.ts:

import {Component} from 'angular2/core';

selector: 'ico-filter-tiles'
,templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'

export class FilterTiles {
public tiles = [];

public constructor(){};

Finally here the templates (as suggested in comments):


<div (click)="onClickSidebar()" class="row" style="height:200px; background-color:red;">


<h1>Tiles loaded</h1>
<div *ngFor="#tile of tiles" class="col-md-4">
... stuff ...

FilterTiles.html template is correctly loaded into ico-filter-tiles tag (indeed I am able to see the header).

Note: the BodyContent class is injected inside another template (Body) using DynamicComponetLoader: dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector):

import {ViewChild, Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {Body} from '../../Layout/Dashboard/Body/Body';
import {BodyContent} from './BodyContent/BodyContent';

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);


The problem is that when I try to write ft into the console log, I get "undefined", and of course I get an exception when I try to push something inside the "tiles" array (no property tiles for "undefined").

One more thing: FilterTiles component seems to be correctly loaded, since I'm able to see the html template for it.

Any suggestion? Thanks


I had a similar issue and thought I'd post in case someone else made the same mistake. First, one thing to consider is AfterViewInit; you need to wait for the view to be initialized before you can access your @ViewChild. However, my @ViewChild was still returning null. The problem was my *ngIf. The *ngIf directive was killing my controls component so I couldn't reference it.

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './controls/controls.component';
import {SlideshowComponent} from './slideshow/slideshow.component';

    selector: 'app',
    template:  `
        <controls *ngIf="controlsOn"></controls>
        <slideshow (mousemove)="onMouseMove()"></slideshow>
    directives: [SlideshowComponent, ControlsComponent]

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null

    onMouseMove(event) {;
         // throws an error because controls is null

Hope that helps.