I load some results of employees and I am using pagination 20 results per page. When I scroll on the last one of the first page I click on this and the user is redirected to another page, when the user clicks the back button they return back to search results but the scroll position has been lost. Any recommendations of how can I maintain it?
2 Answers
Angular has some extra options you can apply when importing your Router Module, which may suit your requirements.
https://angular.io/api/router/ExtraOptions#scrollPositionRestoration
They have an example for component specific scrolling. I have never tried it myself, but it seems to match what you're trying to achieve.
Adding this into you're app.component.ts file do the trick, as said by wingnod.
export class AppComponent {
constructor(router: Router, viewportScroller: ViewportScroller) {
router.events.pipe(
filter((e: Event): e is Scroll => e instanceof Scroll)
).subscribe(e => {
if (e.position) {
// backward navigation
viewportScroller.scrollToPosition(e.position);
} else if (e.anchor) {
// anchor navigation
viewportScroller.scrollToAnchor(e.anchor);
} else {
// forward navigation
viewportScroller.scrollToPosition([0, 0]);
}
});
}
}
The reason of this behavior is that page didn't already render and scrollToPosition no have effect. There are not a good hack with timeout but it works. DrDager
Note
Angular have actually an open issue regarding this problem
Related