angular 2 ViewChild doesnt work

Question

I can't understand why ViewChild is returning null when the same exact code works on a textarea element, but it won't work on div

Template:

<div #refId class = 'line_counter' >
    {{lineNumber}}
</div>

Component:

import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
import {Globals} from "../../../globals";

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

  @ViewChild('#refId') textDiv:ElementRef;

  @Input() lineNumber : number = 0;

  constructor() {
  }

  ngOnInit() {
    if(Globals.refLineCounter == null) {
      Globals.refLineCounter = this;
      //console.log(Globals.refLineCounter.getHeight());
      console.log(this.getHeight());
    }
  }

  getHeight(){
    return this.textDiv.nativeElement.height;
  }
}

Answer 1

Two mistakes in your code - first remove # from ViewChild, you don't need it:

@ViewChild('refId') textDiv:ElementRef;

Second, ViewChild variables are not initialised before AfterViewInit lifecycle, so you need to move your code from ngOnInit to ngAfterViewInit:

ngAfterViewInit() {
    if(Globals.refLineCounter == null) {
      Globals.refLineCounter = this;
      //console.log(Globals.refLineCounter.getHeight());
      console.log(this.getHeight());
    }
}

Answer 2

• ViewChild(en) can be referenced after the ngAfterViewInit event fires. You need to implement interface AfterViewInit from @angular/core.
• You need to use a CSS selector OR you can use the name you provided in the template if you use the hash symbol but refer to it without the hash in your @ViewChild attribute.

See also https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html for additional life cycle hook details.

Here are just the necessary in your code (I removed OnInit as it did not seem necessary in this Component any longer).

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

export class LineCounterComponent implements AfterViewInit {
    @ViewChild('refId') textDiv:ElementRef;

    ngAfterViewInit() {
      if(Globals.refLineCounter == null) {
        Globals.refLineCounter = this;
        //console.log(Globals.refLineCounter.getHeight());
        console.log(this.getHeight());
      }
    }   
}