Answer:21. fix: resolve task 21-anchor-navigation

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

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

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

@@ -1,13 +1,20 @@
 import { Component } from '@angular/core';
+import { MatNavList } from '@angular/material/list';
+import { RouterLink } from '@angular/router';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
-  imports: [NavButtonComponent],
+  imports: [NavButtonComponent, RouterLink, MatNavList],
   selector: 'app-foo',
   template: `
-    Welcome to foo page
-    <nav-button href="home" class="fixed left-1/2 top-3">Home Page</nav-button>
-    <div class="h-screen bg-blue-200">section 1</div>
+    <div class="h-screen bg-blue-200">
+      <mat-nav-list>
+        <h2>Welcome to foo page</h2>
+        <app-nav-button [routerLink]="['/home']" class="fixed left-1/2 top-3">
+          Home Page
+        </app-nav-button>
+      </mat-nav-list>
+    </div>
     <div class="h-screen bg-red-200">section 2</div>
   `,
 })

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

@@ -1,18 +1,32 @@
 import { Component } from '@angular/core';
+import { MatNavList } from '@angular/material/list';
+import { RouterLink } from '@angular/router';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
-  imports: [NavButtonComponent],
+  imports: [NavButtonComponent, RouterLink, MatNavList, NavButtonComponent],
   selector: 'app-home',
   template: `
-    <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
     <div id="top" class="h-screen bg-gray-500">
-      Empty
-      <nav-button href="#bottom">Scroll Bottom</nav-button>
+      <mat-nav-list>
+        <h2>Welcome to home page</h2>
+        <app-nav-button [routerLink]="['/foo']" class="fixed left-1/2 top-3">
+          Foo Page
+        </app-nav-button>
+      </mat-nav-list>
+
+      <div>
+        <app-nav-button [routerLink]="[]" fragment="bottom">
+          Scroll Bottom
+        </app-nav-button>
+      </div>
     </div>
+
     <div id="bottom" class="h-screen bg-blue-300">
       I want to scroll each
-      <nav-button href="#top">Scroll Top</nav-button>
+      <app-nav-button [routerLink]="[]" fragment="top">
+        Scroll Top
+      </app-nav-button>
     </div>
   `,
 })

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

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

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

@@ -2,4 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-/* You can add global styles to this file, and also import other style files */
+html { scroll-behavior: smooth; }