What is ViewChild In Angular

@ViewChild

In Angular, we may use the @viewchild notion to access template data, such as any element from the html file in the ts file or in our component.

The following goals can be accomplished by utilising @viewchild ,

• accessing the same component’s template
• gaining access to the child component’s template

Formula for establishing the @viewchild variable

@ViewChild(‘templaterefvariable’’,{static : true}) mytxt : ElementRef

In the example above, @ViewChild will take two inputs, the first of which concerns a string that must serve as our template reference variable. My variable, “mytxt,” is of the “ElementRef” type.

accessing the same component’s template

Let’s start by developing our application. We’ll have our app component by default.

App.Component.html 

<div>  
   <input #txtName type="text">  
   <button (click)="MyFunc(txtname.value)" >Click Here</button>  
</div>  

The “#txtName” symbol, which simply refers to the name of my template reference variable, can be seen in the html code above. I set the argument for the button click to be “txtName.value” so that it will call the “MyFunc” function in our component file each time the user hits the button.

App.Component.ts

import {  
    Component,  
    ViewChild,  
    ElementRef  
} from '@angular/core';  
@Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
    title = 'Temprefapp';  
    @ViewChild('txtName ', {  
        static: true  
    }) mytxt: ElementRef  
    MyFunc(val) {  
        debugger;  
        console.log(this.mytxt.nativeElement.value);  
    }  
}

First, we must import ViewChild from the “@agular/core” library in order to obtain the @viewchild class. You can see the “mytxt” variable, which is decorated with @ViewChild and has the “ElementRef” type. I may use the ElementRef attribute “nativeElement” within the Myunc function to directly get the element value.

We may also access the child component’s components, attributes, or methods by utilising the viewchild notion. Let’s use a new component in this scenario called Secondcomponent.

Let’s now utilise the appcomponent’s secondcomponents selector as seen below.

import {  
    Component  
} from '@angular/core';  
@Component({  
    selector: 'app-secondcomponent',  
    templateUrl: './secondcomponent.component.html',  
    styleUrls: ['./secondcomponent.component.css']  
})  
export class SecondcomponentComponent {  
    constructor() {}  
    Test() {  
        debugger;  
        return "hello world";  
    }  
}

SecondComponent.html

<p>secondcomponent works!</p>

Now let’s use the “app-secondcomponent” selector to include this second component in our main appcomponent.html so that it looks like the following:

<div>  
   <input type="text"><br/>  
<button >Click Here</button>  
</div>  
<app-secondcomponent></app-secondcomponent>

Let’s now access the “Test()” in appcomponent by using @viewchild.

import {  
    Component,  
    ViewChild,  
    ElementRef,  
    OnInit,  
    AfterViewInit  
} from '@angular/core';  
import {  
    SecondcomponentComponent  
} from './secondcomponent/secondcomponent.component';  
@Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
})  
export class AppComponent implements AfterViewInit {  
    title = 'Temprefapp';  
    @ViewChild(SecondcomponentComponent, {  
        static: false  
    }) vcvariable: SecondcomponentComponent  
    ngAfterViewInit() {  
        debugger;  
        console.log(this.vcvariable.Test());  
    }  
}

If we look at the code above, @viewchild was accepting the component name as the first parameter, then in the ngAfterViewInint() we accessed the Test ().

We may access the information about, attributes, or functions of child components in any of our user-defined functions, such as button click triggering routines, in addition to “ngAfterViewInit”.