feat(challenge 21): enhance navigation with anchor scrolling and router link support

Author: truonghungit

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',
+      }),
+    ),
+  ],
 };

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;
+  });
 }

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;
+}