Encountering an error in Angular where the property 'nativeElement' is undefined when using @ViewChild

Question

Encountering an error in Angular where the property 'nativeElement' is undefined when using @ViewChild

I have a div in my code named #map that will be displayed after a certain condition is met in a for loop.

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

Below is my .ts file with the 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);
  }

The initGMap function is called within the sendMessage function.

javascript angular typescript ecmascript-6 single-page-application

Answer 1

Answer №1

It seems that you are attempting to access an element before it is visible in the DOM. One way to resolve this issue is to either use setTimeOut or leverage the ngAfterContentInit lifecycle hook to ensure that the DOM has finished rendering.

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);
    }
}

Alternatively, you can use setTimeOut to delay the element access.

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);
  }

Answer 2

It seems that you are attempting to access an element before it is visible in the DOM. One way to resolve this issue is to either use setTimeOut or leverage the ngAfterContentInit lifecycle hook to ensure that the DOM has finished rendering.

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);
    }
}

Alternatively, you can use setTimeOut to delay the element access.

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);
  }

Encountering an error in Angular where the property 'nativeElement' is undefined when using @ViewChild

Answer №1

Similar questions

Traversing through intricate weather data in JSON with AngularJS

The enigma of TypeScript

What is the best way to activate an event listener only after a button has been clicked?

Exploring Typescript and Clean Architecture with an In-Memory Database/Repository

What techniques can I use to streamline the following?

Embedding a YouTube video in a view player using HTML5

Error Message for Sequelize Validation Fails to Appear as Expected

When working with express.js, the following error may occur: Uncaught Error [ERR_HTTP_HEADERS_SENT]: Unable to modify headers after they have been sent to the client

Nodejs and express authentication feature enables users to securely access their accounts by verifying their identity before they

What is the best way to share both text and an image URL in a single tweet through the Twitter API

What is preventing me from loading js and css files on my web pages?

Struggling to construct a project using parcel, continually encountering issues with unsupported file types

Are you searching for the origin of a dynamic dropdown widget or database?

Issue: Kindly update your dependencies to the latest version of core-js@3

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

Utilizing Angular 1.5 and ES6 to Enhance Dependency Injection

Angular ngClass and ngIf directives failing to update upon alterations

Modify the background's color and incorporate a pointlight using three.js

Is there a way to compile my Angular application using `npm run build : production` instead of the conventional `npm run build --production` command?

Utilizing async await in a JavaScript event: A guide