Angular 'nativeElement' undefined

Question

I'm using angular 11.0.1 and Ionic 5.4.16 and trying to get Google map. I have put API key and used following commands

map.page.html

<div #mapElement class="map">

map.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';

declare var google;

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
  styleUrls: ['./map.page.scss'],
})
export class MapPage implements OnInit {
  map;
  @ViewChild('mapElement') mapElement;
onstructor() {
    
   }

  ngOnInit() {
  }

  ngAfterContentInit() : void 
  {
    this.map = new google.maps.Map (
      this.mapElement.nativeElement,
      {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      }
    );
  }

}

and I'm getting following error.

TypeError: Cannot read property 'nativeElement' of undefined

Can you try with @ViewChild('mapElement', {static: true}) mapElement; See https://stackoverflow.com/questions/56359504/how-should-i-use-the-new-static-option-for-viewchild-in-angular-8 — Hypenate, Jan 07 '21 at 18:24

score 0 · Answer 1 · answered Jan 07 '21 at 18:53

ViewChild returns the whole component if you do not specify the read option. so make a small change into your code and give it a try

@ViewChild('mapElement', {read: ElementRef}) private mapElement: ElementRef;

or try this

@ViewChild('mapElement', { static: false }) mapElement: ElementRef;

Angular 'nativeElement' undefined

1 Answers1