I'm trying to use the scrollIntoView method on an HTML element within a component. However, I'm encountering the following error:
ERROR TypeError: "_this.scrollableDiv.nativeElement is undefined"
This is my Component Code:
@Input("data") detailData : any = {};
@ViewChild('scrollableDiv') scrollableDiv: ElementRef;
ngOnInit() {
console.log(this.detailData);
const myNode = this.detailData;
console.log(myNode)
if (myNode) {
console.log(this.detailData);
setTimeout(() => {
this.scrollableDiv.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
});
}
}
The relevant section in the HTML looks like this:
<div [id]="detailData.key" #scrollableDiv>
I would appreciate any help or suggestions anyone can offer. Thank you in advance.