@ViewChild In Angular

@ViewChild

 

In Angular, if we want to access the template information; i.e, any element from the html file in the ts file or in our component the we can choose the @viewchild concept.

 

By using @viewchild we can achieve the following things,

• Accessing template of same component
• Accessing the template of child component

Syntax of creating the @viewchild variable

 

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

 

In the above @ViewChild will be accepting two arguments and the first is about a string which has to be our template reference variable. My variable name is “mytxt” which is of type “ElementRef”.

 

Accessing template of same component

 

Let’s firstly create our application. By default we’ll be having our app component.

 

App.Component.html 

<div class="row">
   <input #txtname type="text">
   <button (click)="MyFunc(txtname.value)" >Click Me</button>
</div>

In the above html piece of code, we can find the “#txtname” which is nothing but my template reference variable name. On click of button I passed the parameter as “txtname.value” so that whenever user clicks the button it triggers the “MyFunc” function which will be in our component file.

 

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

Firstly to get the @viewchild class we need to import the ViewChild from the ‘@agular/core’ library. You can observe “mytxt” variable which is of type “ElementRef” and decorated with @ViewChild. Within the function Myunc function I can access the element value directly by using the ElementRef property named “nativeElement”.

 

By using the viewchild concept we can also access the elements, properties or methods of the child component. In this scenario, let’s take a new component named as Secondcomponent.

 

Now let’s use the secondcomponents selector in the appcomponent as like 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";
    }
}

SecondComponent.html

<p>secondcomponent works!</p>

Now let’s use this second component in our main appcomponent.html with the help of selector “app-secondcomponent” so that our appcomponent.html looks as like below :

<div class="row">
   <input type="text"><br/>
<button >Click Me</button>
</div>
<app-secondcomponent></app-secondcomponent>

Now, let’s make use of @viewchild to access the “Test()” in appcomponent.

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

In the above code if we observe, @viewchild was taking the first argument as component name and in the ngAfterViewInint() we accessed the Test().

 

Not only “ngAfterViewInit”, but we can also access the elements info or properties or functions of child component in any of our user defined functions like button click triggering functions.