Cannot read property 'nativeElement' of undefined in angular when using @viewchild

Question

In my code, i have a div named #map that will displayed after a condition from a for loop.

<div *ngFor="let message of fullMessagesArr">
 <div *ngIf="message.replyMap">
   <div #gmap style="width:100px;height:400px"></div>
 </div>
</div>

My .ts file given below with initMap function.

@ViewChild('gmap') gmapElement: ElementRef;
map: google.maps.Map;

  initGMap = () => {
    const mapProp = {
      center: new google.maps.LatLng(6.9404, 79.8464),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.satellite
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }

initGMap function is getting called inside sendMessage function.

Where is fullMessagesArr set? Either it's not set, or it's empty, or none of the messages get the replyMap property set — ShamPooSham
– ShamPooSham, Commented Sep 9, 2019 at 10:50
no, it is not empty, i put items to it from a API call and it is not empty, i checked that — Dushan
– Dushan, Commented Sep 9, 2019 at 10:53
error is not in the array, problem occurs when i use @viewchild and try to load the map with initGMap function — Dushan
– Dushan, Commented Sep 9, 2019 at 11:04
It can be a synchronisation problem. If you call initGMap before fullMessagesArr has been assigned a value, it can lead to these problems. What is printed in the console can be misleading btw — ShamPooSham
– ShamPooSham, Commented Sep 9, 2019 at 11:10

Tony · Accepted Answer · 2019-09-09 10:49:23Z

Seem like you are trying to access the element when it not visible to DOM yet so what you can do is run setTimeOut or use ngAfterContentInit life cycle hook to wait for the DOM to be render

export class AppComponent implements OnInit, OnDestroy, AfterContentInit {

    public ngAfterContentInit(): void {
       const mapProp = {
           center: new google.maps.LatLng(6.9404, 79.8464),
           zoom: 15,
           mapTypeId: google.maps.MapTypeId.satellite
       };
       this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    }
}

or use setTimeOut

initGMap = () => {
    const mapProp = {
      center: new google.maps.LatLng(6.9404, 79.8464),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.satellite
    };
    setTimeout(() => {
         this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    }, 3000);
  }

Collectives™ on Stack Overflow

Cannot read property 'nativeElement' of undefined in angular when using @viewchild

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related