Angular 2 @ViewChild annotation returns undefined

by

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

@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) {
    this.controls.show();
    // throws an error because controls is null
  }
}

Hope that helps.

EDIT
As mentioned by @Ashg below, a solution is to use @ViewChildren instead of @ViewChild.

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. Angular 2 – Return data directly from an Observable
  3. How to return value from function which has Observable subscription inside?
  4. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  5. Define global constants
  6. How to use moment.js library in angular 2 typescript app?
  7. Chaining RxJS Observables from http data in Angular2 with TypeScript
  8. How can I declare a global variable in Angular 2 / Typescript? [closed]
  9. Angular 2: Convert Observable to Promise
  10. Angular2 – should private variables be accessible in the template?
  11. Angular2 canActivate() calling async function
  12. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  13. How can I listen for keypress event on the whole page?
  14. How do you deploy Angular apps?
  15. Angular2 – Http POST request parameters
  16. Angular 2 View will not update after variable change in subscribe
  17. Select based on enum in Angular2
  18. Angular2 handling http response
  19. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  20. angular2 bootstrap with data from ajax call(s)
  21. Integrating Material Design Lite with Angular2
  22. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  23. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  24. How to create an Observable from static data similar to http one in Angular?
  25. RxJs Array of Observable to Observable of Array
  26. How to implement Custom Async Validator in Angular2/4/5
  27. Import gapi.auth2 in angular 2 typescript
  28. What exactly $event object do in Angular 2?
  29. How to deal with http status codes other than 200 in Angular 2
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment