Angular Scroll Position Restoration

[@sudiptomukherjee644]

Excellent and informative video. It is a needed feature in most application. Thank you :)

[@CodeShotsWithProfanis]

Glad you think so Sudipto! :)

[@VladyslavHaidar]

Sir, please, don't disappear, we like your content so much, keep going on it!

[@CodeShotsWithProfanis]

Glad you like my content and thanks for your warm comment!

[@giorgoskontis7185]

Thank you for the video man!

[@zzzbyyy]

This is exactly what I was looked for .... I have same problem with scrolling in my app. I feel like everything is so complicated in Angular LOL

[@CodeShotsWithProfanis]

Out of curiosity, how does a restore scrolling implementation looks like to other frameworks?

[@zzzbyyy]

@@CodeShotsWithProfanis Well that's a good question. I have never done this in other frameworks that's why probably thought it's gonna be easy. In reality it's tricky ...

[@zzzbyyy]

is this solution will work when I use this.router.navigate() ?

[@CodeShotsWithProfanis]

​@@zzzbyyy yes indeed. It's relatively straight forward with static data, but tricky with dynamic data. I am not sure either how the implementation looks like in other frameworks, but I like that we do not have to manually track the scrolling position. We only need to fetch and use it.

[@veeramanikantapinnana423]

Hi
Can I know which vscode extensions you are using

[@ralph8529]

Nice example of practical feature which for example ecommerce shops often needs, when back to list of products. Personally I create a public method for emit a value by BehaviourSubject and keep my BehaviourSubject property private. But this is some individual preferences I think.

[@rythmrana1987]

which version of angular is this

[@CodeShotsWithProfanis]

I am doing that with Angular 18 but it's also compatible with older versions.

[@swapnasaritnayak2569]

What if we assign the route pipe to an observable and use it in tap operator inside the API call pipe ?

[@CodeShotsWithProfanis]

I would try to keep separate the API call and the routing

[@ZeR0ByTe]

Thanks!
And what happen if you are using Infinite Scroll? Will works too?
Thanks!

[@CodeShotsWithProfanis]

That's an interesting question.
I would approach that by tweaking the "decision point".
Meaning: When you have an infinite scroll you can keep the state of the current page on the query params (e.g. ?page=2).
When you navigate back to the page you are taking under consideration the page query param, you are firing the HTTP calls and I would expect the HTTP Calls to have the current page on the response.
The decistion point would be HTTP Response#Page_Property===Page_Query_Param

[@anuragsing039]

HI fanis , please can you provide a demo code for this video against.

[@CodeShotsWithProfanis]

There is repo link in video's description :)

[@tomazmajerhold8413]

it looks like position$ is not emitting from router

[@tomazmajerhold8413]

RestoreScrollPositionDirective:ngAfterViewInit I see in console that is called at correct time but is not scroll to the correct position. AutoScrollService::init position has no next emited

[@rythmrana1987]

perfect

[@tomazmajerhold8413]

My mistake I forget withInMemoryScrolling

[@santiagobruno_t1581]

thanks!!!!

[@iamtrinhchau]

🎉 awesome

[@mahdiandalib186]

thx man

[@mahdiandalib186]

plz create full web with admin panel using angular

[@aram5642]

What you did is kind of replica of bfcache and pageshow event for SPA :)