What is ViewChild in Angular2?

It provides a reference to elements or components in your view:

@Component({
  ...
  directives: [SomeComponent],
  template: `
  <div><span #myVar>xxx</span><div>
  <some-comp></some-comp>`
})
class MyComponent {
  @ViewChild('myVar') myVar:ElementRef;
  @ViewChild(SomeComponent) someComponent:SomeComponent;
  
  ngAfterViewInit() {
    console.log(this.myVar.nativeElement.innerHTML);
    console.log(this.someComponent);
  }
}

IMPORTANT: The variables are not initialized before ngAfterViewInit()

@viewchild()

In Angular we define a template of a component by combining plain HTML with other Angular components. In the view (html file) we can define template reference variable in the following manner:

<input type="text" #firstNameInput>
<myDefaultComponent #reference></myDefaultComponent>

Using template reference variables the components and html elements are usually only available inside the view. However, when we want to inject references of the component or html element and inject them into our model (ts file component class) we can use @viewchild() in order to achieve this.

We use @viewchild() decorator in the following manner:

  @ViewChild('myReference') myClassproperty;

Using @viewchild() will do different things based on where the reference was placed:

1. When the reference was placed on a html component it will inject the html DOM component into the model as a class property (myClassproperty in this example). We then can access this property in the model using this.myClassproperty
2. When the reference was placed on a angular component it will inject the Angular component into the model as a class property (myClassproperty in this example). We then can access this property in the model using this.myClassproperty

Thus @viewchild() is very convenient to inject other child components or child HTML elements into the model class. The parent component now can react based on the behaviour of its child components and html elements which is a feature that is often required.

Caveat:

Also important to note is that you should put @viewchild() in an ngAfterViewInit() hook. This is because you can only have access to the elements in the view after they are rendered.

The ViewChild decorator is used to gain access to a child component, found in the template, so that you can access its properties and methods.

Angular have two parts one is the view and the other is component or the code which handles the view data & events. In component many times we would like to refer instance of view elements , that’s where “ViewChild” helps.

“ViewChild” helps to reference view objects in the component to which it is connected. “ViewChild” references one object while “ViewChildren” references collection.

For example in the below code at the left hand side we have view and the right hand side we have the component ( code behind) , you can see how viewchild is used to refer the view elements like Div1 , Comp2 and so on.

You can also check out this youtube video which explain viewchild in angular in more crisp way.