diff --git a/apps/angular/21-anchor-navigation/src/app/app.config.ts b/apps/angular/21-anchor-navigation/src/app/app.config.ts
index 66ab7f73f..ba519ab03 100644
--- a/apps/angular/21-anchor-navigation/src/app/app.config.ts
+++ b/apps/angular/21-anchor-navigation/src/app/app.config.ts
@@ -1,6 +1,14 @@
import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { appRoutes } from './app.routes';
export const appConfig: ApplicationConfig = {
- providers: [provideRouter(appRoutes)],
+ providers: [
+ provideRouter(
+ appRoutes,
+ withInMemoryScrolling({
+ anchorScrolling: 'enabled',
+ scrollPositionRestoration: 'enabled',
+ }),
+ ),
+ ],
};
diff --git a/apps/angular/21-anchor-navigation/src/app/foo.component.ts b/apps/angular/21-anchor-navigation/src/app/foo.component.ts
index 6744c3662..09ccfd691 100644
--- a/apps/angular/21-anchor-navigation/src/app/foo.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/foo.component.ts
@@ -6,7 +6,9 @@ import { NavButtonComponent } from './nav-button.component';
selector: 'app-foo',
template: `
Welcome to foo page
- Home Page
+
+ Home Page
+
section 1
section 2
`,
diff --git a/apps/angular/21-anchor-navigation/src/app/home.component.ts b/apps/angular/21-anchor-navigation/src/app/home.component.ts
index 6ef9bc2b6..5356466ef 100644
--- a/apps/angular/21-anchor-navigation/src/app/home.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/home.component.ts
@@ -2,17 +2,21 @@ import { Component } from '@angular/core';
import { NavButtonComponent } from './nav-button.component';
@Component({
- imports: [NavButtonComponent],
selector: 'app-home',
+ imports: [NavButtonComponent],
template: `
- Foo Page
+
+ Foo Page
+
Empty
- Scroll Bottom
+
+ Scroll Bottom
+
I want to scroll each
- Scroll Top
+ Scroll Top
`,
})
diff --git a/apps/angular/21-anchor-navigation/src/app/nav-button.component.ts b/apps/angular/21-anchor-navigation/src/app/nav-button.component.ts
index 9e3b6d42f..3cc2b8bf1 100644
--- a/apps/angular/21-anchor-navigation/src/app/nav-button.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/nav-button.component.ts
@@ -1,10 +1,11 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, Input } from '@angular/core';
+import { RouterLinkWithHref } from '@angular/router';
@Component({
selector: 'nav-button',
- standalone: true,
+ imports: [RouterLinkWithHref],
template: `
-
+
`,
@@ -14,4 +15,5 @@ import { Component, Input } from '@angular/core';
})
export class NavButtonComponent {
@Input() href = '';
+ @Input() fragment: string | undefined = undefined;
}
diff --git a/apps/angular/21-anchor-navigation/src/index.html b/apps/angular/21-anchor-navigation/src/index.html
index 06a706a0a..9d5bdcaf8 100644
--- a/apps/angular/21-anchor-navigation/src/index.html
+++ b/apps/angular/21-anchor-navigation/src/index.html
@@ -1,5 +1,5 @@
-
+
angular-anchor-navigation