The RouterScroller entity is a very interesting part of the Angular Router. In this post, we’re going to have a look at how it works, what makes its features possible and how it can be configured, depending on the developer’s needs.

The RouterScroller entity is a very interesting part of the Angular Router. In this post, we’re going to have a look at how it works, what makes its features possible and how it can be configured, depending on the developer’s needs.

It helps us achieve things like scrolling to a fragment, setting an offset for that fragment and, lastly, navigating back to where the browser left off as a result of a popstate event.

THIS AD MAKES CONTENT FREE. HIDE

How RouterScroller is set up#

Files referenced in this section: router_module, router_scroller.

Since the @angular/router is a built-in package provided by Angular, is has to go through a process of initialization, in order to make sure everything is set up correctly. In this case, it happens inside a APP_BOOTSTRAP_LISTENER’s listener. If we peek at the source code, we can see that the first lines of the function’s block are just this.injector.get calls:

const opts = this.injector.get(ROUTER_CONFIGURATION);
const preloader = this.injector.get(RouterPreloader);
const routerScroller = this.injector.get(RouterScroller);
const router = this.injector.get(Router);
const ref = this.injector.get<ApplicationRef>(ApplicationRef);

/* ... */
<>

This might seem trivial at first sight, but some of the arguments provided to this.injector.get are in fact factory tokens, meaning that some piece of logic will run in order to retrieve what has been asked for.

For example, RouterScroller(the article’s focal point) is defined as follows:

{
  provide: RouterScroller,
  useFactory: createRouterScroller,
  deps: [Router, ViewportScroller, ROUTER_CONFIGURATION]
},
<>

createRouterScroller will simply create an instance of the RouterScroller class, based on the ROUTER_CONFIGURATION token. This can be seen in the class’ constructor:

constructor(
    private router: Router,
    public readonly viewportScroller: ViewportScroller, private options: {
      scrollPositionRestoration?: 'disabled'|'enabled'|'top',
      anchorScrolling?: 'disabled'|'enabled'
    } = {}) {
  // Default both options to 'disabled'
  options.scrollPositionRestoration = options.scrollPositionRestoration || 'disabled';
  options.anchorScrolling = options.anchorScrolling || 'disabled';
}
<>

Then, after the Router is initialized (Router.initialNavigation), the RouterScroller will be initialized as well, with RouterScroller.init():

init(): void {
  // we want to disable the automatic scrolling because having two places
  // responsible for scrolling results race conditions, especially given
  // that browser don't implement this behavior consistently
  if (this.options.scrollPositionRestoration !== 'disabled') {
    this.viewportScroller.setHistoryScrollRestoration('manual');
  }

  this.routerEventsSubscription = this.createScrollEvents();
  this.scrollEventsSubscription = this.consumeScrollEvents();
}
<>

The last two lines represent the gist of RouterScroller. We are going to explore them in the following section, along with some examples.

#angular #angular-router