Fino alla versione 7 di Angular, i decorator ViewChild e ContentChild impostano la variabile che decorano a partire dal metodo ngAfterViewInit della pipeline di esecuzione del component. Questo esempio mostra questo funzionamento.

<h1 #MyDiv>mydiv</h1>

@ViewChild('MyDiv') myDiv: ElementRef<HTMLDivElement>;
ngOnInit() {
  console.log(this.myDiv); // ritorna undefined
}

ngAfterViewInit() {
  console.log(this.myDiv); // ritorna div
}

A partire da Angular 8, se il tag non è contenuto all'interno di un template con una direttiva strutturale come ngIf e ngFor, allora la variabile decorata è disponibile già nei metodi che vengono eseguiti prima di ngAfterViewInit come mostrato in questo esempio.

ngOnInit() {
  console.log(this.myDiv); // ritorna div
}

ngAfterViewInit() {
  console.log(this.myDiv); // ritorna div
}

Se vogliamo mantenere il comportamento precedente ad Angular 8, dobbiamo inserire un secondo parametro nei decorator ViewChild e ContentChild. Questo parametro deve essere un oggetto con la proprietà static impostata a true.

@ViewChild('MyDiv', { static: true }) myDiv: ElementRef<HTMLDivElement>;