Demystifying angular/router: what is RouterScroller and why is it useful ?

Demystifying angular/router: what is RouterScroller and why is it useful ?

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.

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_modulerouter_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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Router Tutorial Example From Scratch

Angular Router Tutorial Example. Angular 4 Router is a basic requirement to create single page application. Angular 4 Tutorial with an example.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

The Three Pillars of the Angular Router — Router States and URL Matching

Our first task is to understand how the router handles URLs internally.

Angular Router Series: Pillar 2 — Understanding The Router’s Navigation Cycle

Routing is essential for any frontend framework or library. It makes single page applications possible by letting us load the application once, and display different content to the user through client-side routing.