Angular 10 Scroll location on back button

Question

I have some issues to get the correct scroll location when user press the browser back button. Currently the async data that needs to be loaded takes to long so the scroll is only partial before the data is completed.

If I use a fixed height for the container div then the scroll restoration works as expected.

Any ideas on how I can fix this issue?

Below is the relevant part of my route to which the scroll restoration failes. The method processProdTypQuery checks the router parameters and only emits new data to articleOutput$ if required. articlesView is used as input for a dumb component in the template.

articles-route.component.ts

export class ArticlesRouteComponent implements OnInit {

  articlesView: Article[];

  constructor(
    private route: ActivatedRoute,

    // Service that collects article data from API
    private article: articleService,

    // Service that takes an article list as input, filters it and outputs a new list
    private articleFilter: ArticleFilterService) {

    this.articleFilter.articleOutput$.subscribe(output => {
      this.articlesView = output;
    });
  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.articleFilter.processProdTypQuery(params);
      this.article.processProdTypQuery(params);
    });
  }
}

Scroll restoration enabled in router module as below,

@NgModule({
  imports: [ RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled'
    })
  ],
  exports: [ RouterModule ]
})

Answer 1

I'll add my own solution although it's probably not the best answer. Hopefully it can still help someone else.

Instead of trying to figure out angulars handling of scroll restoration I save the Y scroll position in the article list service on ngOnDestroy

export class ArticlesRouteComponent implements OnInit, OnDestroy {

  articlesView: Article[];

  constructor(
    private route: ActivatedRoute,

    // Service that collects article data from API
    private article: articleService,

    // Service that takes an article list as input, filters it and outputs a new list
    private articleFilter: ArticleFilterService) {

    this.articleFilter.articleOutput$.subscribe(output => {
      this.articlesView = output;

      this.articleFilter.restoreScrollPosition();
    });
  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.articleFilter.processProdTypQuery(params);
      this.article.processProdTypQuery(params);
    });
  }
  
  ngOnDestroy() {
    this.articleFilter.scrollPosition = window.scrollY;
  }
}

this.articleFilter.restoreScrollPosition() Scroll restoration method should probably run somewhere else as it requires a timeout to work properly.

restoreScrollPosition() {
    window.setTimeout(() => {
      window.scrollTo({behavior: 'smooth',top:this.scrollPosition, left:0});
    }, 200);
  }