Angular - Cannot find name 'ViewChild' - Solved

This article is focused on Cannot find name 'ViewChild' in angular. you can see angular error ts2304 cannot find name 'ViewChild'. This tutorial will give you simple example of angular cannot find ViewChild error. We will use angular cannot find name ViewChild.

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 'ViewChild'" in angular application. we need to import ViewChild from @angular/core library. so let's see below the solution and full code.

Solution:

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

Import ViewChild:

import { ViewChild } 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...