fix bug where scrollIntoView does not work on page load

- Unfortunately seems to require setTimeout... Postponing to next microtask does not work (Promise.resolve)

Author: willshowell

src/app/pages/component-viewer/component-api.html

@@ -4,5 +4,5 @@
 <doc-viewer
   documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
   class="docs-component-view-text-content docs-component-api"
-  (contentLoaded)="toc.updateScrollPosition()"></doc-viewer>
+  (contentLoaded)="toc.contentReady()"></doc-viewer>
 <table-of-contents #toc headerSelectors=".docs-api-h3,.docs-api-h4"></table-of-contents>

src/app/pages/component-viewer/component-overview.html

@@ -4,6 +4,6 @@
 <doc-viewer
     documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-overview"
-    (contentLoaded)="toc.updateScrollPosition()">
+    (contentLoaded)="toc.contentReady()">
 </doc-viewer>
 <table-of-contents #toc></table-of-contents>

src/app/pages/guide-viewer/guide-viewer.html

@@ -4,8 +4,8 @@ <h1>{{guide.name}}</h1>
 
 <div class="docs-guide-wrapper">
   <div class="docs-guide-toc-and-content">
-    <doc-viewer class="docs-guide-content" 
-    (contentLoaded)="toc.updateScrollPosition()"
+    <doc-viewer class="docs-guide-content"
+      (contentLoaded)="toc.contentReady()"
       [documentUrl]="guide.document"></doc-viewer>
     <table-of-contents #toc></table-of-contents>
   </div>

src/app/shared/table-of-contents/table-of-contents.ts

@@ -80,17 +80,20 @@ export class TableOfContents implements OnDestroy, OnInit {
     this._destroyed.complete();
   }
 
-  updateScrollPosition(): void {
+  contentReady(): void {
     this._links = this.createLinks();
     this.scrollFragmentIntoView();
   }
 
   /** Find the target from the url fragment and scroll it into view. */
   private scrollFragmentIntoView(): void {
-    const target = document.getElementById(this._urlFragment);
-    if (target) {
-      target.scrollIntoView();
-    }
+    this._ngZone.runTask(() => {
+      const target = document.getElementById(this._urlFragment);
+      if (target) {
+        // scrollIntoView may require next macrotask if target has just been loaded
+        setTimeout(() => target.scrollIntoView());
+      }
+    });
   }
 
   /** Gets links generated from header selectors. */