How to use ViewChild correctly

Issue

This Angular app consists of only app-root component with a single <div> and a <button>.

When a button is clicked the onClick() function logs to console the div_a object with:

console.log("...onClick() div_a:", this.div_a);

with div_a defined with following statement:

@ViewChild('div_a', { static: false }) div_a: Component;

Question: why both the ngOnInit and constructor functions logs that the div_a is undefined? How to fix the problem of these functions of not being able to use div_a object?

Below is the link to Stackblitz project (please note that the GitHub branch that is linked to this stackblitz project needs to be switched from master to qViewChild branch).

https://stackblitz.com/edit/angular-r9hwbs?file=src%2Fapp%2Fwidget-a%2Fwidget-a.component.html

Solution

Based on the docs, ViewChild and ViewChildren queries are run before AfterViewInit, so you'll need to access them there. Just accessing div_a won't work unless you tag it in the template.

Among others, the children you can access are:

• Any class with the @Component or @Directive decorator
• A template reference variable as a string (e.g. query <my-component #cmp></my-component> with @ViewChild('cmp'))

So you'll need something like this:

<p #myPara>
  Start editing to see some magic happen :)
</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
  @ViewChild('myPara', {static: false}) paragraph;


  ngAfterViewInit() {
    console.log(this.paragraph) // results in -> ElementRef {nativeElement: p}
  }
}

Blitz

Answered By - Phix