title: Angular 4 cannot read property nativeElement of undefined using ViewChild
body: <p>I am simply trying to access an element within my Angular 4 template to place a Google Map but I keep getting a "cannot read property native element of undefined" error. I've seen other people asking similar questions but anything I've tried up to this point has not worked.</p>
  
  <p>I get the same error when trying to access the element in both <code>ngOnInit</code> and <code>ngAfterViewInit</code>. I also tried using <code>document.getElementById</code> and that gives me a null error as well. I know its not a Google Maps error because I get the error trying to access the element outside of Google Maps.</p>
  
  <p>I have the following inside home.component.ts (this is inside a specific home component, not within the main app module): </p>
  
  <pre><code>import { NgModule, Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
  import { } from '@types/googlemaps';
  
  @Component({
     selector: 'home-page',
     templateUrl: './home.html'
  })
  
  export class HomeComponent implements OnInit, AfterViewInit {
       @ViewChild('gmap') el:ElementRef;
       map: google.maps.Map;
  
       public ngOnInit() {
          // other component initialization code here
       }
  
       public ngAfterViewInit () {
          let mapProp = {
             center: new google.maps.LatLng(18.5793, 73.8143),
             zoom: 15,
             mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           this.map = new google.maps.Map(this.el.nativeElement, mapProp);
  
        // this alone gives me the same error
        setTimeout(() =&gt; {
            console.log(this.el.nativeElement);
         }, 0);
      }
  }
  </code></pre>
  
  <p>Inside the component template - home.component.html:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="text-center"&gt;
              &lt;div #gmap style="width:100%;height:400px"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>