@ViewChild() Decorator in Angular 5

@ViewChild() Decorator in Angular 5 :
Decorators: Decorators are like functions and they are called with the prefix symbol @ in Angular 5.

1. Decorators immediately follows the class, function, property and a parameter.

2. Decorators should be provided with the information, about the class or parameter or function.

There are several different kinds of decorators in Angular 5 but we will mainly focus on the @ViewChild
1. Class Decorators. Examples: @component for components, @Ngmodule, @Injectable for the dependency injections.
2. Property Decorator Examples: @Input, @Output, @ViewChild.
3. Method Decorator Example: @HostListner
4. Parameter Decorator Example @Inject.

@ViewChild() Decorator in Angular 5

This decorator can be used
1. To get the reference of the element or the directive matching the selector from the DOM.
2. To get the instance of another component in a parent component. So that parent component can access the methods and properties of that component.

@ViewChild() helps us to communicate with a component or directive. It can be used with the components, directives and template reference variable with ElementRef or TemplateRef.

Let’s discuss @ViewChild() decorator with an example.

In this example we are going to call functions of the child component from the parent component. We are going to use the @ViewChild() decorator in the parent component to reference the child component.

import { StopwatchComponent } from './stopwatch/stopwatch.component';
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  @ViewChild(StopwatchComponent)
  private stopwatchComponent: StopwatchComponent;
  startStopwatch() {
    this.stopwatchComponent.start();
  }
  stopStopwatch() {
    this.stopwatchComponent.stop();
  }
}

Here we will use app component as the parent component. As you can see in the code we created a reference for the StopwatchComponent. We imported StopwatchComponent and created a private instance of the StopwatchComponent. And we are calling start and stop functions of the StopwatchComponent from the app component.

Now Let’s create buttons to handle startStopwatch and startStopwatch function call in turn they will call the start and stop functions of the StopwatchComponent.

<h3>@ViewChild using Component</h3>
Stopwatch Example:
<button type="button" (click)="startStopwatch()">Start</button>
<button type="button" (click)="stopStopwatch()">Stop</button>
<br/>
<app-stopwatch></app-stopwatch>

@ViewChild() Decorator in Angular 5

Let’s create our child StopwatchComponent to implement our timer start and stop functions.

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

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html',
  styleUrls: ['./stopwatch.component.css']
})
export class StopwatchComponent implements OnInit {

  shouldRun: boolean = false;
  counter: number = 0;
  start() {
    this.shouldRun = true;
    let interval = setInterval(() => {
      if (this.shouldRun === false) {
        clearInterval(interval);
      }
      this.counter = this.counter + 1;
    }, 1000);
  }
  stop() {
    this.shouldRun = false;
  }
  constructor() { }

  ngOnInit() {
  }

}

and put this markup in stopwatch.component.html to show whether timer is running or not.

<h2>{{counter}}</h2>

I hope this helped you.

happy Coding..!