How to solve "Cannot read property 'scrollIntoView' of undefined"?

Question

I want to scroll to a particular div on clicking a button in Angular 7, below is the code I am using but it is working in stackblitz but showing error when i use in my project. "Cannot read property 'scrollIntoView' of undefined".

https://stackblitz.com/edit/angular-scroll-local-variable?file=src%2Fapp%2Fscroll.component.ts

try this link: https://stackblitz.com/edit/angular-scroll-local-variable-ja96uz?file=src%2Fapp%2Fapp.component.html

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

and in component:

scroll(el) {
    el.scrollIntoView();
}

Solution 1

Try angular ViewportScroller Service Which provide scrollToAnchor method

scroll.html

<button (click)="scroll('target')">Click to scroll</button>
<div id="target">Your target</div>

scroll.ts

import { Component, Input } from '@angular/core';
import { ViewportScroller } from '@angular/common';
@Component({
  selector: 'scroll',
  template: `
    <button (click)="scroll('target')">Click to scroll</button>
    <div id="target">Your target</div>
  `,
  styles: [`h1 { font-family: Lato; }`, `div { margin-top: 5000px; }`]
})
export class ScrollComponent {

  constructor(private vps: ViewportScroller) {

  }
  scroll(id) {
    this.vps.scrollToAnchor(id);
  }
}

Example:https://stackblitz.com/edit/angular-scroll-local-variable-99hwvo

Solution 2

Try using ViewChild:

//HTML 
<button (click)="scroll()"></button><div #target>Your target</div>


//ts

//Import
import { ..., ViewChild, ElementRef } from '@angular/core';

//Declare
@ViewChild('target') targetEl: ElementRef;

scroll() {
    this.targetEl.nativeElement.scrollIntoView();
}

Comments

[mani singh]

i have tried and now it is showing "Cannot read property 'scrollIntoView' of null"

[mani singh]

I tried and it is showing "Cannot read property 'nativeElement' of undefined"

[mani singh]

@PrashantPimpale yes it is working in stackblitz but showing error mentioned above in question when i use with html in different file and ts code in different.

[mani singh]

@Chellappan thanks error is not showing now but it is not getting scroll to the div i need. i have this in my html > line a: <mat-radio-button value="1" (click)="onButtonClick(); scroll('target');">Cash</mat-radio-button> AND AT line b: <div id="target"> <ion-card *ngIf="buttonClicked"> //some data in card </ion-card> </div>

[mani singh]

@PrashantPimpale i have this in my html > line a: <mat-radio-button value="1" (click)="onButtonClick(); scroll('target');">Cash</mat-radio-button> AND AT line b: <div id="target"> <ion-card *ngIf="buttonClicked"> //some data in card </ion-card> </div>

[mani singh]

i tried this but it is not working can u please share stackblitz working of it?

[mani singh]

can u please check ur link ?? it is not working as expected

[mani singh]

@Chellappan your solution is not making page scrolled to the id given div. you can check here what i am trying to achieve. stackblitz.com/edit/…

[Chellappan வ]

you are not using Viewportscroller

[mani singh]

@Chellappan I had but with that too didn't provided the result. No scrolling was there.

[Velusamy Venkatraman]

this answer only for exception handler. but need a solution for that.

[Prashant Pimpale]

You must have checked the stackblitz, did you?