Angular 2 @ViewChild returns undefined

Try using a ref in your template instead:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>    <div class='gallery-padding'></div>    <img class='gallery-image' src='{{ coverPhotoVm }}' />    <img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' /></div>

And use the ref name as the argument:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

EDIT

Forgot to mention that any view child thus declared is only available after the view is initialized. The first time this happens is in ngAfterViewInit (import and implement the AfterViewInit interface).

The ref name must not contain dashes or this will not work

Sometimes, if the component isn’t yet initialized when you access it, you get an error that says that the child component is undefined.

However, even if you access to the child component in the AfterViewInit, sometimes the @ViewChild was still returning null. The problem can be caused by the *ngIf or other directive.

The solution is to use the @ViewChildren instead of @ViewChild and subscribe the changes subscription that is executed when the component is ready.

For example, if in the parent component ParentComponent you want to access the child component MyComponent.

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';import { MyComponent } from './mycomponent.component';export class ParentComponent implements AfterViewInit{  //other code emitted for clarity  @ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>;  public ngAfterViewInit(): void  {    this.childrenComponent.changes.subscribe((comps: QueryList<MyComponent>) =>    {      // Now you can access the child component    });  }}

Subscribing to changes on

@ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>

confirmed working, combined with setTimeout() and notifyOnChanges() and careful null checking.

Any other approach produces unreliable results and is hard to test.