Angular 4 cannot read property nativeElement of undefined using ViewChild

Question

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.

I get the same error when trying to access the element in both ngOnInit and ngAfterViewInit. I also tried using document.getElementById 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.

I have the following inside home.component.ts (this is inside a specific home component, not within the main app module):

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(() => {
          console.log(this.el.nativeElement);
       }, 0);
    }
}

Inside the component template - home.component.html:

<div class="row">
    <div class="col-md-12">
        <div class="text-center">
            <div #gmap style="width:100%;height:400px"></div>
        </div>
    </div>
</div>

Answer 1

Your component's templateUrl says './home.html' but you also mentioned the file name being home.component.html in "Inside the component template - home.component.html". Maybe that's your problem?

Answer 2

I had a loader on the page that was showing until all the data was returning on the page:

public getData() {
    this.loading = true;
    this.homeService.getData().subscribe(response => {
        this.resort = response;
        this.loading = false;
        this.error = false;
        this.getMap();
    }, error => {
        this.loading = false;
        this.error = true;
    });
}

So even though ngAfterViewInit was running, the data from the database still wasn't back by the time that function ran, which was why it wasn't able to find the element as the actual data was hidden from an *ngIf until this.loading was false. So to correct I'm just calling getMap() once the data has been returned, rather then in the AfterViewInit function.

I then had to wrap that getMap function in a setTimeout to ensure the *ngIf was loading the content data before I was trying to access the element as well:

public getMap() {
    setTimeout(() => {
        // accessing element here
    });
 }