From 9483d55be89c3570ee5b6824194f9d0a5a435aeb Mon Sep 17 00:00:00 2001
From: Hung Pham <truonghungit@gmail.com>
Date: Sun, 19 Apr 2026 15:52:11 +0700
Subject: [PATCH] feat(challenge 21): enhance navigation with anchor scrolling
 and router link support

---
 .../21-anchor-navigation/src/app/app.config.ts    | 12 ++++++++++--
 .../src/app/nav-button.component.ts               | 15 +++++++++++++--
 apps/angular/21-anchor-navigation/src/styles.css  |  4 ++++
 3 files changed, 27 insertions(+), 4 deletions(-)

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/nav-button.component.ts b/apps/angular/21-anchor-navigation/src/app/nav-button.component.ts
index 7a22c7f38..a56156de4 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,12 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'nav-button',
+  imports: [RouterLink],
   template: `
-    <a [href]="href()">
+    <a [routerLink]="routerLink()" [fragment]="fragment()">
       <ng-content />
     </a>
   `,
@@ -14,4 +16,13 @@ import { Component, input } from '@angular/core';
 })
 export class NavButtonComponent {
   href = input('');
+
+  isAnchorLink = computed(() => this.href().startsWith('#'));
+  routerLink = computed(() => {
+    return this.isAnchorLink() ? [] : this.href();
+  });
+
+  fragment = computed(() => {
+    return this.isAnchorLink() ? this.href().substring(1) : undefined;
+  });
 }
diff --git a/apps/angular/21-anchor-navigation/src/styles.css b/apps/angular/21-anchor-navigation/src/styles.css
index ead2ca114..150246487 100644
--- a/apps/angular/21-anchor-navigation/src/styles.css
+++ b/apps/angular/21-anchor-navigation/src/styles.css
@@ -1,3 +1,7 @@
 @import "tailwindcss";
 
 /* You can add global styles to this file, and also import other style files */
+
+html {
+  scroll-behavior: smooth;
+}