Cannot read properties of undefined (reading 'nativeElement') In Angular

Question

Hi While using ElementRef in Viewchild() I am facing an error. Please see the below error and let me know what is an issue.

I also used ngAfterViewInit() but this error can not be resolved.

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

export class SearchInsightEverythingComponent implements OnInit {
  @ViewChild("svgNetwork",{read: ElementRef}) svgNetworkContainer: ElementRef;
  ngOnInit(){
     draw();
  }

 draw(){
   var container = this.svgNetworkContainer.nativeElement;
   console.log("svgNetworkContainer = " + JSON.stringify(this.svgNetworkContainer));
 }

}

.HTML

<div id="viz" #svgNetwork style="height: calc(100vh - 174px);">
        <img src="../../../assets/exxon/graph.png">
  </div>

Error

core.js:1440 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
at SearchInsightEverythingComponent.drawNetwork (search-everything-insight.component.ts:505:46)
at SafeSubscriber.eval [as _next] (search-everything-insight.component.ts:697:16)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240:1)
at SafeSubscriber.next (Subscriber.js:187:1)
at Subscriber._next (Subscriber.js:128:1)
at Subscriber.next (Subscriber.js:92:1)
at MapSubscriber._next (map.js:85:1)
at Subscriber.next (Subscriber.js:92:1)
at FilterSubscriber._next (filter.js:90:1)
at Subscriber.next (Subscriber.js:92:1)

Does this answer your question? [Cannot read properties of undefined (reading 'nativeElement')](https://stackoverflow.com/questions/74121154/cannot-read-properties-of-undefined-reading-nativeelement) — Ken White, Feb 08 '23 at 04:36
It's impossible to explain problems with code we cannot see. Please post a [mre] that demonstrates the issue, as the [help/on-topic] guidelines require. — Ken White, Feb 08 '23 at 04:36

score 0 · Answer 1 · answered Feb 08 '23 at 06:43

You should use early return statement if that view was undefined.

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

export class SearchInsightEverythingComponent implements OnInit {
  @ViewChild("svgNetwork",{read: ElementRef}) svgNetworkContainer: ElementRef;
  ngOnInit(){
     if(!svgNetworkContainer) return;
     draw();
  }

 draw(){
   var container = this.svgNetworkContainer.nativeElement;
   console.log("svgNetworkContainer = " + JSON.stringify(this.svgNetworkContainer));
 }

}

Error caused due to the lack of your elementRef. In your ngOnit, you call your draw() function and use nativeElement in it. But your svgNetworkContainer was being undefined. These are the reason why you are facing this error.

Thank you but doesn't works. – Rakesh Saini Feb 09 '23 at 04:08 — Rakesh Saini, Feb 09 '23 at 04:08

score 0 · Answer 2 · answered Feb 08 '23 at 06:50

0

ngAfterViewInit exists for this purpose.

export class SearchInsightEverythingComponent implements OnInit, AfterViewInit {
    @ViewChild("svgNetwork",{read: ElementRef}) svgNetworkContainer: ElementRef;
    ngOnInit(){
                
    }

    ngAfterViewInit(): void {
        draw();
    }

    draw(){
      var container = this.svgNetworkContainer.nativeElement;
    }
}

answered Feb 08 '23 at 06:50

Vigneshwaran Sourirajalu

117
4

Make sure your element which you are trying to refer in your ts, is not inside *ngIf directive. If thats the case, then you can't get that element because it is not rendered in the DOM. – Vigneshwaran Sourirajalu Feb 09 '23 at 05:06

Cannot read properties of undefined (reading 'nativeElement') In Angular

2 Answers2