Is there a breaking change in angular when upgrading from angular 8 to 9 in nativeElement

Question

I have recently upgraded my angular cli version to 9.1.4 from earlier version of 8. So i wanted to ask that is there a breaking change in this nativeElement thing.

Some of the code of my ts file where i used my nativeElement is as follows

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

@Component({
  selector: 'app-note-card',
  templateUrl: './note-card.component.html',
  styleUrls: ['./note-card.component.scss']
})
export class NoteCardComponent implements OnInit {

  @Input() title: string;
  @Input() body: string;

  @ViewChild('truncator') truncator: ElementRef<HTMLElement>;
  @ViewChild('bodyText') bodyText:ElementRef<HTMLElement>;

  constructor(private renderer: Renderer2) { }



ngOnInit() {

    // work out if there is a text overflow and if not then hide the truncator

    let style = window.getComputedStyle(this.bodyText.nativeElement, null);
    let viewableHeight = parseInt(style.getPropertyValue("height"), 10);

    if(this.bodyText.nativeElement.scrollHeight>viewableHeight){
      // if there is a text overflow, show the fade out truncator
      this.renderer.setStyle(this.truncator.nativeElement, 'display', 'block');
    }else{
      // else (there is a text overflow), hide the fade out truncator
      this.renderer.setStyle(this.truncator.nativeElement, 'display', 'none');
    }
  }

}

And this is the error which i get in the browser

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at NoteCardComponent.ngOnInit (note-card.component.ts:22)
    at callHook (core.js:4735)
    at callHooks (core.js:4699)
    at executeInitAndCheckHooks (core.js:4639)
    at selectIndexInternal (core.js:9701)
    at Module.ɵɵadvance (core.js:9662)
    at NotesListComponent_Template (notes-list.component.html:19)
    at executeTemplate (core.js:12098)
    at refreshView (core.js:11945)
    at refreshComponent (core.js:13410)
defaultErrorLogger @ core.js:6237

Any help is welcomed Thanks in advance:)

Answer 1

When you are using ViewChild decorator in OnInit life cycle hook you must specify the static property to be true to resolve query results before change detection runs. By default is false so it resolves after change detection runs.

For use in ngOnInit , like in your case, see the code below:

  @ViewChild('truncator', { static: true }) truncator: ElementRef<HTMLElement>;
  @ViewChild('bodyText', { static: true }) bodyText:ElementRef<HTMLElement>;

If you are not using in OnInit you need to set it to false. In Angular 9 is optional in this case since the default is false.

I wonder, how did you not get the errors in Angular 8 where this property was mandatory for both cases.

Answer 2

@ViewChild() decorator makes the queried elements available only from AfterViewInit on. So, instead of running your code in ngOnInit method, move it to ngAfterViewInit method.