dsebastien

...

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {

dsebastien

@NgModule({
  exports: [RouterModule],
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes, {
      ...
      // Restore the last scroll position
      scrollPositionRestoration: "enabled",
      scrollOffset: [0, 0],
      // Enable scrolling to anchors

dsebastien

import { NavigationEnd, NavigationStart } from "@angular/router";

/**
 * Service that handles scrolling back to top if/when needed, depending on the configured strategies and route config.
 * Can be configured through route data, by defining the "scrollBehavior" key and setting it to a valid {RouteScrollBehaviour} value
 * References
 * https://www.bennadel.com/blog/3534-restoring-and-resetting-the-scroll-position-using-the-navigationstart-event-in-angular-7-0-4.htm
 *   Potential for improvement from there: listen to scroll events on the DOM
 * https://medium.com/angular-in-depth/reactive-scroll-position-restoration-with-rxjs-792577f842c
 * https://medium.com/@samisalamiger/great-article-f4f642b134ab

dsebastien

const appRoutes: CustomRoutes = [
  {
    path: "todos",
    loadChildren: () => import("@app/todos/feature-shell").then((mod) => mod.TodosFeatureShellModule),
    ...
    data: {
      ...
      scrollBehavior: RouteScrollBehaviour.KEEP_POSITION,
    },
    ...

dsebastien

import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from "@angular/router";
import { Injectable, OnDestroy } from "@angular/core";
import { ViewportScroller } from "@angular/common";
import { filter, observeOn, scan } from "rxjs/operators";
import { asyncScheduler, Subscription } from "rxjs";
import {
  RouterScrollService,
  RouteScrollBehaviour,
  RouteScrollStrategy,
  ScrollPositionRestore,

dsebastien

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
    ...
  ],

dsebastien

...

@Component(
{
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})

dsebastien

sebastien@developassion:~/wks/tmp/test$ git init
Initialized empty Git repository in /home/sebastien/wks/tmp/test/.git/
sebastien@developassion:~/wks/tmp/test$ git status
On branch master

No commits yet

nothing to commit

dsebastien

sebastien@developassion:~/wks/tmp/test$ echo "Hello world" > hello.txt
sebastien@developassion:~/wks/tmp/test$ cat hello.txt
Hello world
sebastien@developassion:~/wks/tmp/test$ git status
On branch master

No commits yet

Untracked files:
	hello.txt

dsebastien

class Test {
  x;
  constructor(b: boolean ) {
    if(b) {
      this.x = 'hello'
    } else {
      this.x = 42;
    }
  }
}