Angular set scroll position after div and data are fully rendered

Question

I've been trying to keep scroll position of element holding a grid with hundreds of rows of data. Right now it's set with overflow-y: auto. If I use router to go to different page and than go back I'd like the scroll to be in the same position. I thought that using ngAfterViewInit will do the trick but unfortunately it doesn't work. If I use the console to fire up the set position command it works fine. I guess the problem is with rows still being loaded and not yet rendered when calling ngAfterViewInit .

@Component({ selector: 'grid', templateUrl: './grid.component.html', styleUrls: ['./grid.component.scss'] }) export class GridComponent implements OnInit, OnDestroy { @Input() rows: Array<Row>; @Input() someKindOfGridId: string; localGridConfigValue: ILocalGridConfigValue; constructor(private configService: ConfigService) { } ngOnInit() { this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId); } ngAfterViewInit(){ document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos; } ngOnDestroy() { this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop; } }

I'm still learning angular and any help will be greatly appreciated.

Regards.

It doesn't directly solve your issue but this might help figure it out - stackoverflow.com/questions/39601026/… — mtpultz
– mtpultz, Commented Nov 16, 2017 at 20:51
You should look into angular's DoCheck lifecycle hook. It allows you to implement a custom change detection hook. In your case a hook that detects that your dom is completely loaded. — Andresson
– Andresson, Commented Nov 16, 2017 at 21:55

cah1r · Accepted Answer · 2017-11-21 13:46:33Z

I managed to solve this using tip from @Andresson but DoCheck wasn't enough and I used ngAfterViewChecked instead. The important thing is I had to make sure that setting scroll position will be set off only once.

@Component({ selector: 'grid', templateUrl: './grid.component.html', styleUrls: ['./grid.component.scss'] }) export class GridComponent implements OnInit, OnDestroy { @Input() rows: Array<Row>; @Input() someKindOfGridId: string; localGridConfigValue: ILocalGridConfigValue; rowsCount: number = 0; scrolled: boolean = false; constructor(private configService: ConfigService) { } ngOnInit() { this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId); this.scrolled = false; } ngAfterViewChecked() { let newRowsCount = this.rows.length; if (newRowsCount <= 0 || !this.rowsCountChanged(newRowsCount) || this.scrolled) return; document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos; this.rowsCount = newRowsCount; this.scrolled = true; } private rowsCountChanged(newRowsCount: number): boolean { return newRowsCount !== this.rowsCount; } ngOnDestroy() { this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop; this.scrolled = false; } }

user15840603 · Accepted Answer · 2021-05-05 08:20:23Z

Solution from @MateuszMigała works. We can improve it by checking for changes to the collection.

import { Component, IterableDiffers, OnInit } from '@angular/core'; @Component({ selector: 'grid', templateUrl: './grid.component.html', styleUrls: ['./grid.component.scss'] }) export class GridComponent implements OnInit, OnDestroy { @Input() rows: Array<Row>; @Input() someKindOfGridId: string; localGridConfigValue: ILocalGridConfigValue; rowsCount: number = 0; scrolled: boolean = false; private iterableDiffer; constructor(private configService: ConfigService, private iterableDiffers: IterableDiffers) { this.iterableDiffer = iterableDiffers.find([]).create(null); } ngOnInit() { this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId); this.scrolled = false; } ngAfterViewChecked() { if (this.scrolled) { return; } else { let changes = this.iterableDiffer.diff(this.rows); if (!changes) return; document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos; this.scrolled = true; } } ngOnDestroy() { this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop; this.scrolled = false; } }

Collectives™ on Stack Overflow

Angular set scroll position after div and data are fully rendered

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related