Answer: 21 implemented router link

apps/angular/21-anchor-navigation/src/app/app.config.ts

@@ -1,6 +1,13 @@
 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',
+      }),
+    ),
+  ],
 };

apps/angular/21-anchor-navigation/src/app/home.component.ts

@@ -9,11 +9,11 @@ import { NavButtonComponent } from './nav-button.component';
     <nav-button href="/foo" class="fixed top-3 left-1/2">Foo Page</nav-button>
     <div id="top" class="h-screen bg-gray-500">
       Empty
-      <nav-button href="#bottom">Scroll Bottom</nav-button>
+      <nav-button href="" fragment="bottom">Scroll Bottom</nav-button>
     </div>
     <div id="bottom" class="h-screen bg-blue-300">
       I want to scroll each
-      <nav-button href="#top">Scroll Top</nav-button>
+      <nav-button href="" fragment="top">Scroll Top</nav-button>
     </div>
   `,
 })

apps/angular/21-anchor-navigation/src/app/nav-button.component.ts

@@ -1,18 +1,26 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  InputSignal,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'nav-button',
   template: `
-    <a [href]="href()">
+    <a [routerLink]="href()" [fragment]="fragment()">
       <ng-content />
     </a>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
   host: {
     class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
   },
 })
 export class NavButtonComponent {
-  href = input('');
+  public href: InputSignal<string> = input<string>('');
+  public fragment: InputSignal<string> = input<string>('');
 }

apps/angular/21-anchor-navigation/src/styles.css

@@ -1,3 +1,7 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 /* You can add global styles to this file, and also import other style files */
+
+html {
+  scroll-behavior: smooth;
+}