fix(docs): Make fragment scrolling work

Author: Airblader

projects/ngqp-demo/src/app/demo-routing.module.ts

@@ -36,8 +36,11 @@ const routes: Routes = [
     imports: [
         RouterModule.forRoot(routes, {
             useHash: true,
-            scrollPositionRestoration: 'enabled',
-            anchorScrolling: 'enabled',
+            // FIXME: These don't work as expected at the moment, but we can revisit activating them later.
+            // We explicitly disable them as they will become enabled by default in the future, and as long
+            // as we have our own solution, we need to avoid that.
+            scrollPositionRestoration: 'disabled',
+            anchorScrolling: 'disabled',
         }),
     ],
     exports: [ RouterModule ],

projects/ngqp-demo/src/app/demo.component.ts

@@ -1,16 +1,29 @@
 import { Component } from '@angular/core';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FragmentScrollService } from './shared/fragment-scroll.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'demo-root',
     templateUrl: './demo.component.html',
     styleUrls: ['./demo.component.scss'],
+    providers: [
+        // This cannot be provided in root
+        FragmentScrollService,
+    ],
 })
 export class DemoComponent {
 
     public faGithub = faGithub;
     public isNavbarExpanded = false;
 
+    constructor(
+        private fragmentScroller: FragmentScrollService,
+        private router: Router,
+    ) {
+        fragmentScroller.startFragmentScroller(router);
+    }
+
     public closeNav() {
         this.isNavbarExpanded = false;
     }

projects/ngqp-demo/src/app/shared/fragment-scroll.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { ViewportScroller } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+
+@Injectable()
+export class FragmentScrollService {
+
+    constructor(private scroller: ViewportScroller) {
+    }
+
+    public startFragmentScroller(router: Router): void {
+        router.events.pipe(
+            filter(event => event instanceof NavigationEnd),
+            map(event => event as NavigationEnd)
+        ).subscribe(event => {
+            const { fragment } = router.parseUrl(event.urlAfterRedirects);
+            if (!fragment) {
+                this.scroller.scrollToPosition([0, 0]);
+                return;
+            }
+
+            setTimeout(() => this.scroller.scrollToAnchor(fragment), 0);
+        });
+    }
+
+}