title: @viewChild not working - cannot read property nativeElement of undefined
body: <p>I'm trying to access a native element in order to focus on it when another element is clicked (much like the html attribute "for" - for cannot be used on elements of this type.</p>
  
  <p>However I get the error: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'nativeElement' of undefined</p>
  </blockquote>
  
  <p>I try to console.log the nativeElement in <code>ngAfterViewInit()</code> so that it is loaded but it still throws the error.</p>
  
  <p>I also access nativeElement in the click event handler, so that I can focus the element when another element is clicked - is this possibly what is mucking it up, because it compiles before the view has loaded?.</p>
  
  <p>eg:</p>
  
  <pre class="lang-ts prettyprint-override"><code>ngAfterViewInit() {
      console.log(this.keywordsInput.nativeElement); // throws an error
  }
  
  focusKeywordsInput(){
      this.keywordsInput.nativeElement.focus();
  }
  </code></pre>
  
  <p>full Code:</p>
  
  <p>relevant part of the html template being used:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;div id="keywords-button" class="form-group" (click)="focusKeywordsInput()"&gt;
      &lt;input formControlName="keywords" id="keywords-input" placeholder="KEYWORDS (optional)"/&gt;
      &lt;div class="form-control-icon" id="keywords-icon"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
  import {  REACTIVE_FORM_DIRECTIVES, 
            FormGroup, 
            FormBuilder, 
            Validators,
            ControlValueAccessor
          } from '@angular/forms';
  import { NumberPickerComponent } from './number-picker.component';
  import { DistanceUnitsComponent } from './distance-units.component';
  import { MapDemoComponent } from '../shared/map-demo.component';
  import { AreaComponent } from './area-picker.component';
  import { GoComponent } from './go.component';
  import { HighlightDirective } from '../highlight.directive';
  
  @Component({
     selector: 'find-form',
     templateUrl: 'app/find-page/find-form.component.html',
     styleUrls: ['app/find-page/find-form.component.css'],
     directives: [REACTIVE_FORM_DIRECTIVES, 
                  NumberPickerComponent, 
                  DistanceUnitsComponent, 
                  MapDemoComponent, 
                  AreaComponent, 
                  GoComponent]
  })
  export class FindFormComponent implements OnInit, AfterViewInit {
     findForm: FormGroup;
     submitted: boolean; // keep track on whether form is submitted
     events: any[] = []; // use later to display form changes
     @ViewChild('keywords-input') keywordsInput;
  //comment
     constructor(private formBuilder: FormBuilder, el: ElementRef) {}
  
     ngOnInit() {
        this.findForm = this.formBuilder.group({
           firstname: ['', [ Validators.required, Validators.minLength(5) ] ],
           lastname: ['', Validators.required],
           keywords: [],
           area: ['', Validators.required],
           address: this.formBuilder.group({
              street: [],
              zip: [],
              city: []
           })
        });
  
        this.findForm.valueChanges.subscribe(data =&gt; console.log('form changes', data));
     }
  
       ngAfterViewInit() {
      console.log(this.keywordsInput.nativeElement); // throws an error
    }
  
     focusKeywordsInput(){
        this.keywordsInput.nativeElement.focus();
     }
  
     save(isValid: boolean) {
        this.submitted = true;
        // check if model is valid
        // if valid, call API to save customer
        console.log(isValid);
     }
  }
  </code></pre>
  
  <p>full html template (probably irrelevant):</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;form class="text-uppercase" [formGroup]="findForm" (ngSubmit)="save(findForm.value, findForm.valid)"&gt;
      &lt;div class="row is-heading"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group"&gt;
              &lt;h2 class="search-filter-heading heading m-x-auto"&gt;find vegan&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row has-error-text"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"&gt;
              &lt;div style="position: relative; display: inline-block; width: 100%;"&gt;
                  &lt;multiselect #multiselect&gt;&lt;/multiselect&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row error-text"  [style.display]="multiselect.selectedCategories.length &lt; 1 &amp;&amp; submitted ? 'block' : 'none'"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 form-group input-group btn-group"&gt;
              &lt;small&gt;Please select at least 1 category.&lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row is-heading"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group"&gt;
              &lt;h2 class="search-filter-heading heading m-x-auto"&gt;within&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"&gt;
              &lt;div style="position: relative; display: inline-block;"&gt;
                  &lt;number-picker #numberPicker&gt;&lt;/number-picker&gt;
              &lt;/div&gt;
              &lt;distance-units&gt;&lt;/distance-units&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row is-heading"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group"&gt;
              &lt;h2 class="search-filter-heading heading m-x-auto"&gt;of&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row has-error-text"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"&gt;
              &lt;div style="position: relative; display: inline-block; width: 100%;"&gt;
                  &lt;my-area&gt;&lt;/my-area&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row error-text"  [style.display]="multiselect.selectedCategories.length &lt; 1 &amp;&amp; submitted ? 'block' : 'none'"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 form-group input-group btn-group"&gt;
              &lt;small [hidden]="findForm.controls.firstname.valid || (findForm.controls.firstname.pristine &amp;&amp; !submitted)"&gt;Please enter an area.&lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row is-heading"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group"&gt;
              &lt;h2 class="search-filter-heading heading m-x-auto"&gt;keywords&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row form-group"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"&gt;
              &lt;div style="position: relative; display: inline-block; width: 100%;"&gt;
                  &lt;div id="keywords-button" class="form-group" (click)="focusKeywordsInput()"&gt;
                      &lt;input formControlName="keywords" id="keywords-input" placeholder="KEYWORDS (optional)"/&gt;
                      &lt;div class="form-control-icon" id="keywords-icon"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group" style="height:64px;"&gt;
              &lt;div style="position: relative; display: inline-block; width: 100%;"&gt;
                  &lt;go&gt;&lt;/go&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>