From 1f01bcc5f3ec4ba6bf3e190e9bb5ed2abd0fb532 Mon Sep 17 00:00:00 2001
From: Andrew Scott <atscott@google.com>
Date: Tue, 31 May 2022 14:30:09 -0700
Subject: [PATCH] docs(router): Adjust example for scrollPositionRestoration
 (#46201)

This makes a small update to the example so that it shows a use-case
that's not already covered by the 'enabled' option. The existing example
would get identical behavior to `scrollPositionRestoration: 'enabled'`
with `anchorScrolling: 'enabled'`.

The updated example shows a use-case for when custom scrolling _would_
be needed. For example, when data is fetched because it is not available
immediately or through a resolver. This is one of the cases described in #24547

This update is sufficient to address all of the documentation problems
noted in the aforementioned issue. Another fix should be made to address
the problem that scroll restoration needs to be delayed until after CD
has run so the update block of the activated component's template is
run.

PR Close #46201
---
 packages/router/src/router_module.ts | 29 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/router/src/router_module.ts b/packages/router/src/router_module.ts
index 54ce07a888a..ac7211893f8 100644
--- a/packages/router/src/router_module.ts
+++ b/packages/router/src/router_module.ts
@@ -314,21 +314,22 @@ export interface ExtraOptions {
    * in the following example.
    *
    * ```typescript
-   * class AppModule {
-   *   constructor(router: Router, viewportScroller: ViewportScroller) {
-   *     router.events.pipe(
-   *       filter((e: Event): e is Scroll => e instanceof Scroll)
+   * class AppComponent {
+   *   movieData: any;
+   *
+   *   constructor(private router: Router, private viewportScroller: ViewportScroller,
+   * changeDetectorRef: ChangeDetectorRef) {
+   *   router.events.pipe(filter((event: Event): event is Scroll => event instanceof Scroll)
    *     ).subscribe(e => {
-   *       if (e.position) {
-   *         // backward navigation
-   *         viewportScroller.scrollToPosition(e.position);
-   *       } else if (e.anchor) {
-   *         // anchor navigation
-   *         viewportScroller.scrollToAnchor(e.anchor);
-   *       } else {
-   *         // forward navigation
-   *         viewportScroller.scrollToPosition([0, 0]);
-   *       }
+   *       fetch('http://example.com/movies.json').then(response => {
+   *         this.movieData = response.json();
+   *         // update the template with the data before restoring scroll
+   *         changeDetectorRef.detectChanges();
+   *
+   *         if (e.position) {
+   *           viewportScroller.scrollToPosition(e.position);
+   *         }
+   *       });
    *     });
    *   }
    * }