feat(challenge 21): angular-anchor-navigation my version

rubensedev · rubensedev · commit 3d5aaceba95f · 2025-05-13T13:54:03.000+02:00
diff --git 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
@@ -6,7 +6,9 @@ import { NavButtonComponent } from './nav-button.component';
   selector: 'app-foo',
   template: `
     Welcome to foo page
-    <nav-button href="home" class="fixed left-1/2 top-3">Home Page</nav-button>
+    <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-red-200">section 2</div>
   `,
diff --git 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: `
-    <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
+    <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>
+      <nav-button [href]="'/home'" [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]="'/home'" [fragment]="'top'">Scroll Top</nav-button>
     </div>
   `,
 })
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
@@ -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: `
-    <a [href]="href">
+    <a [routerLink]="href" [fragment]="fragment">
       <ng-content></ng-content>
     </a>
   `,
@@ -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
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
   <head>
     <meta charset="utf-8" />
     <title>angular-anchor-navigation</title>
