demo: fix anchor scrolling

ng-bootstrap · May 25, 2023 · 5331176 · 5331176
1 parent 88bf6a7
commit 5331176
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,