Angular - Cannot find name 'ElementRef' - Solved

This tutorial will provide example of Cannot find name 'ElementRef' in angular. this example will help you angular error ts2304 cannot find name 'ElementRef'. This article will give you simple example of angular cannot find ElementRef error. This article will give you simple example of angular cannot find name ElementRef.

You can use this solution with angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

In this post, I will give you the solution of "Cannot find name 'ElementRef'" in angular application. we need to import ElementRef from @angular/core library. so let's see below the solution and full code.

Solution:

let's import ElementRef from @angular/core npm package, as bellow:

Import ElementRef:

import { ElementRef } from '@angular/core';

Let's see bellow working code:

Example:

import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  
  @ViewChild("myDomeElem", { static: true }) myDomeElem: ElementRef;
  
  ngOnInit() {
    console.log(this.myDomeElem);
    this.myDomeElem.nativeElement.innerHTML = "Changed Dom Element Value";
  }
  
  ngAfterViewInit() {
    console.log(this.myDomeElem);
  }
}

I hope it can help you...