title: Angular 2 @ViewChild returns undefined
body: <p>I've looked at several related posts and documentation, but still can't seem to get expected behavior from @ViewChild. </p>
  
  <p>Ultimately, I'm trying to set the scroll position of a div. This element isn't a component, but a normal div in my HTML. </p>
  
  <p>To accomplish this, I'm trying to use @ViewChild to get the DOM element I need, and set its scroll value. (As an aside, if you know a better way to accomplish this without @ViewChild (or jQuery), answers will be very much appreciated!)</p>
  
  <p>At the moment, @ViewChild only returns undefined. Going through some dummy checks:
   - I am accessing my element in AfterViewInit
   - I do not have any other directives like *ngIf or *ngFor on this element.</p>
  
  <p>Here's the controller:</p>
  
  <pre><code>import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
      selector: 'portfolio-page',
      templateUrl: './portfolio-page.component.html',
      styleUrls: ['./portfolio-page.component.scss']
  })
  
  export class PortfolioPageComponent implements AfterViewInit{
      @ViewChild('gallery-container') galleryContainer: ElementRef;
  
      ngAfterViewInit(){
          console.log('My element: ' + this.galleryContainer);
      }
  }
  </code></pre>
  
  <p>And the template:</p>
  
  <pre><code>&lt;div id='gallery-container' class='gallery-image-container'&gt;
      &lt;div class='gallery-padding'&gt;&lt;/div&gt;
      &lt;img class='gallery-image' src='{{ coverPhotoVm }}' /&gt;
      &lt;img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My output is simple: My element: undefined.</p>
  
  <p>As you can see, I'm currently trying to access the element by ID, but have tried class name as well. Could anyone provide more detail about what the ViewChild selector query is expecting?</p>
  
  <p>I've also seen examples where a hash '#' is used as the selector idendifier that @ViewChild uses --  -- but this causes a template parse error for me with #gallery-container.</p>
  
  <p>I can't think of anything else that could possible be wrong here. All help is appreciated, thanks!</p>
  
  <p>Full code available here: <a href="https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page" rel="noreferrer">https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page</a></p>