After upgrading my angular cli version to 9.1.4 from the previous version 8, I am wondering if there are any breaking changes related to nativeElement functionality.
Below is a snippet of code from my TypeScript file where I have used nativeElement:
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() {
// Determine text overflow and show/hide truncator accordingly
let style = window.getComputedStyle(this.bodyText.nativeElement, null);
let viewableHeight = parseInt(style.getPropertyValue("height"), 10);
if(this.bodyText.nativeElement.scrollHeight>viewableHeight){
this.renderer.setStyle(this.truncator.nativeElement, 'display', 'block');
}else{
this.renderer.setStyle(this.truncator.nativeElement, 'display', 'none');
}
}
}
I am encountering the following error 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
If anyone could provide assistance, it would be greatly appreciated. Thank you in advance :)