ViewChild In Angular

Introduction

ViewChild is a decorator in Angular written as @ViewChild. It is used as a query mechanism. It gives the user access to child components, directives, and DOM elements from the parent component class. It returns the very first child of the specific reference. ViewChild gives access to the instance of the component, directive or template reference in the parent's component so that we can use the properties and methods of the child's component. 
  • The view of the child component will be rendered after the ngAfterViewInit hook of the component life cycle. So we have to implement the ngAfterViewInit in our component.
  • The first argument pass to ViewChild is the type of the component, directive, template reference we want to access.

Accessing DOM Elements

We can have access to the local DOM element having a template reference variable. Suppose we have a div in which we have to display a google map. So we will do something like this:
       <div #gmap style="height:550px;background:#d1d1d1;"></div>

We will now take the reference for this DOM element using ViewChild as follows. We will go to the ts file and write the below code to initialize a map. 
  @ViewChild('gmap') gmapElement: any;

Here we created a property called gmapElement. @ViewChild decorator conveys Angular to search this element in the component template, child component, etc. 

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

@Component({
  selector: 'app-map',
  templateUrl: './app-map.component.html',
  styleUrls: ['./app-map.component.css']
})
export class AppMapComponent implements AfterViewInit {
  @ViewChild('gmap') gmapElement: any;

  ngAfterViewInit() {
   console.log(gmapElement);
  }
mapInit() {
    var mapProp = {
      streetViewControl: false,
      center: new google.maps.LatLng(this.place.lat, this.place.lng),
      maxZomaxZom: 15,
      mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp); //We are using the referecne here as well
}

The value of the gmapElement will be logged on the console after ngAfterViewInit() hook is called.

Accessing Child Components

We can access child components from parent class using @ViewChild. All the methods, template references, directives, variables will be available in the parent component. Suppose in a child component we have a method called getMessage(). 
getMessage(){
  return "Hello World"
}

Now in the parent component, we can get access to this method using ViewChild as follows. We will go to the parent ts file and write the below code to use the getMessage() method of the child component.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildFormComponent } from './child.component';

@Component({
  selector: 'app-form-root',
  templateUrl: './app-form.component.html',
  styleUrls: ['./app-form.component.css']
})
export class AppComponent implements AfterViewInit {
 @ViewChild(ChildFormComponent) childComp: ChildFormComponent;

  ngAfterViewInit() {
    console.log(this.childComp.getMessage()); // Hello World
  }
}

Comments