From 533117616ad5b9d9396e1e6af74a5660f87319c4 Mon Sep 17 00:00:00 2001
From: Max Okorokov <max@okorokov.com>
Date: Mon, 15 May 2023 10:47:34 +0200
Subject: [PATCH] demo: fix anchor scrolling

---
 demo/src/app/app.component.ts                 | 19 +++----------------
 .../api-docs/api-docs-class.component.html    |  2 +-
 .../api-docs/api-docs-config.component.html   |  2 +-
 .../shared/api-docs/api-docs.component.html   |  2 +-
 .../shared/examples-page/demo.component.html  |  3 +--
 .../overview/overview-section.component.ts    |  4 ++--
 .../page-wrapper/page-header.component.ts     |  7 +++----
 demo/src/main.ts                              | 11 +++++++++--
 8 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index 3e537b3869..568d381aa7 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -1,13 +1,12 @@
-import { ViewportScroller } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, NgZone, OnInit } from '@angular/core';
-import { ActivatedRoute, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { NgbdDemoVersionsComponent } from './demo-versions.component';
 
 import { COMPONENT_LIST } from './shared/component-list';
 import { environment } from '../environments/environment';
 import { AnalyticsService } from './services/analytics.service';
-import { filter, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { of } from 'rxjs';
 
 @Component({
@@ -22,19 +21,7 @@ export class AppComponent implements OnInit {
 
 	components = COMPONENT_LIST;
 
-	constructor(
-		private _analytics: AnalyticsService,
-		route: ActivatedRoute,
-		vps: ViewportScroller,
-		zone: NgZone,
-		httpClient: HttpClient,
-	) {
-		route.fragment
-			.pipe(filter((fragment) => !!fragment))
-			.subscribe((fragment: string) =>
-				zone.runOutsideAngular(() => requestAnimationFrame(() => vps.scrollToAnchor(fragment))),
-			);
-
+	constructor(private _analytics: AnalyticsService, route: ActivatedRoute, zone: NgZone, httpClient: HttpClient) {
 		if (environment.production) {
 			httpClient
 				.get<{ downloads: string }>('https://api.npmjs.org/downloads/point/last-month/@ng-bootstrap/ng-bootstrap')
diff --git a/demo/src/app/shared/api-docs/api-docs-class.component.html b/demo/src/app/shared/api-docs/api-docs-class.component.html
index d1710f3a3f..1d606b49ab 100644
--- a/demo/src/app/shared/api-docs/api-docs-class.component.html
+++ b/demo/src/app/shared/api-docs/api-docs-class.component.html
@@ -1,5 +1,5 @@
 <div class="api-doc-component" [class.deprecated]="apiDocs.deprecated">
-	<h3>
+	<h3 [id]="apiDocs.className">
 		<a routerLink="." fragment="{{ apiDocs.className }}" ngbdFragment title="Anchor link to: {{ apiDocs.className }}">
 			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 		</a>
diff --git a/demo/src/app/shared/api-docs/api-docs-config.component.html b/demo/src/app/shared/api-docs/api-docs-config.component.html
index 1aede75703..2565ff6d38 100644
--- a/demo/src/app/shared/api-docs/api-docs-config.component.html
+++ b/demo/src/app/shared/api-docs/api-docs-config.component.html
@@ -1,5 +1,5 @@
 <div (click)="trackSourceClick()" class="api-doc-component" [class.deprecated]="apiDocs.deprecated">
-	<h3>
+	<h3 [id]="apiDocs.className">
 		<a routerLink="." fragment="{{ apiDocs.className }}" ngbdFragment title="Anchor link to: {{ apiDocs.className }}">
 			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 		</a>
diff --git a/demo/src/app/shared/api-docs/api-docs.component.html b/demo/src/app/shared/api-docs/api-docs.component.html
index 60e96dd5ce..62fe21fdb7 100644
--- a/demo/src/app/shared/api-docs/api-docs.component.html
+++ b/demo/src/app/shared/api-docs/api-docs.component.html
@@ -1,5 +1,5 @@
 <div class="api-doc-component" [class.deprecated]="apiDocs.deprecated">
-	<h3>
+	<h3 [id]="apiDocs.className">
 		<a routerLink="." [fragment]="apiDocs.className" ngbdFragment title="Anchor link to: {{ apiDocs.className }}">
 			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 		</a>
diff --git a/demo/src/app/shared/examples-page/demo.component.html b/demo/src/app/shared/examples-page/demo.component.html
index e60ec3057a..996a431c9f 100644
--- a/demo/src/app/shared/examples-page/demo.component.html
+++ b/demo/src/app/shared/examples-page/demo.component.html
@@ -1,6 +1,5 @@
 <div class="component-demo">
-	<a [id]="id"></a>
-	<h2>
+	<h2 [id]="id">
 		<a routerLink="." [fragment]="id" ngbdFragment title="Anchor link to demo: {{ id }}">
 			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 		</a>
diff --git a/demo/src/app/shared/overview/overview-section.component.ts b/demo/src/app/shared/overview/overview-section.component.ts
index 03078961c0..f7b768f19d 100644
--- a/demo/src/app/shared/overview/overview-section.component.ts
+++ b/demo/src/app/shared/overview/overview-section.component.ts
@@ -13,8 +13,8 @@ import { NgbdFragment } from '../fragment/fragment.directive';
 		class: 'd-block',
 	},
 	template: `
-		<h2>
-			<a class="title-fragment" routerLink="." [fragment]="section.fragment" ngbdFragment>
+		<h2 [id]="section.fragment">
+			<a class="title-fragment" routerLink="." [fragment]="section.fragment">
 				<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 			</a>
 			{{ section.title }}
diff --git a/demo/src/app/shared/page-wrapper/page-header.component.ts b/demo/src/app/shared/page-wrapper/page-header.component.ts
index 0b28656a1b..3a38bfa4e2 100644
--- a/demo/src/app/shared/page-wrapper/page-header.component.ts
+++ b/demo/src/app/shared/page-wrapper/page-header.component.ts
@@ -1,19 +1,18 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { NgbdFragment } from '../fragment/fragment.directive';
 import { NgbdOverviewSection } from '../overview/overview';
 
 @Component({
 	selector: 'ngbd-page-header',
 	standalone: true,
-	imports: [RouterLink, NgbdFragment],
+	imports: [RouterLink],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'd-block',
 	},
 	template: `
-		<h2>
-			<a routerLink="." [fragment]="fragment" ngbdFragment>
+		<h2 [id]="fragment">
+			<a class="title-fragment" routerLink="." [fragment]="fragment">
 				<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: black"></i>
 			</a>
 			{{ title }}
diff --git a/demo/src/main.ts b/demo/src/main.ts
index 3ee308aee9..bbf4353916 100644
--- a/demo/src/main.ts
+++ b/demo/src/main.ts
@@ -1,13 +1,20 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
+import { PreloadAllModules, provideRouter, withInMemoryScrolling, withPreloading } from '@angular/router';
 import { ROUTES } from './app/routes';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { provideHttpClient, withNoXsrfProtection } from '@angular/common/http';
 
 bootstrapApplication(AppComponent, {
 	providers: [
-		provideRouter(ROUTES, withPreloading(PreloadAllModules)),
+		provideRouter(
+			ROUTES,
+			withPreloading(PreloadAllModules),
+			withInMemoryScrolling({
+				anchorScrolling: 'enabled',
+				scrollPositionRestoration: 'enabled',
+			}),
+		),
 		{
 			provide: LocationStrategy,
 			useClass: HashLocationStrategy,