From 72082c353d79f0a8f058ea55508796c9ade2c2dd Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Sat, 16 Nov 2024 04:16:45 +0100
Subject: [PATCH] feat(21-anchor-navigation): implement anchor navigation with
 smooth scrolling

---
 .../21-anchor-navigation/src/app/app.component.ts  |  2 +-
 .../21-anchor-navigation/src/app/app.config.ts     | 13 +++++++++++--
 .../21-anchor-navigation/src/app/foo.component.ts  |  4 +++-
 .../21-anchor-navigation/src/app/home.component.ts |  7 ++++---
 .../src/app/nav-button.component.ts                | 14 ++++++++++----
 apps/angular/21-anchor-navigation/src/styles.scss  |  3 +++
 6 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/apps/angular/21-anchor-navigation/src/app/app.component.ts b/apps/angular/21-anchor-navigation/src/app/app.component.ts
index 3fb7c5df0..b7fbf9013 100644
--- a/apps/angular/21-anchor-navigation/src/app/app.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/app.component.ts
@@ -6,7 +6,7 @@ import { RouterOutlet } from '@angular/router';
   imports: [RouterOutlet],
   selector: 'app-root',
   template: `
-    <router-outlet></router-outlet>
+    <router-outlet />
   `,
 })
 export class AppComponent {}
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..543194058 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,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({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: '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
index 87f9b59d9..f25b3ddf8 100644
--- a/apps/angular/21-anchor-navigation/src/app/foo.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/foo.component.ts
@@ -7,7 +7,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 route="/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
index 0f24ff6e7..543d1427b 100644
--- a/apps/angular/21-anchor-navigation/src/app/home.component.ts
+++ b/apps/angular/21-anchor-navigation/src/app/home.component.ts
@@ -6,14 +6,15 @@ import { NavButtonComponent } from './nav-button.component';
   imports: [NavButtonComponent],
   selector: 'app-home',
   template: `
-    <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
+    <nav-button route="/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 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 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
index 9e3b6d42f..9e33debdd 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,11 +1,16 @@
 /* eslint-disable @angular-eslint/component-selector */
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
 @Component({
   selector: 'nav-button',
   standalone: true,
+  imports: [RouterLink],
   template: `
-    <a [href]="href">
-      <ng-content></ng-content>
+    <a
+      [routerLink]="route()"
+      [fragment]="fragment() === '' ? undefined : fragment()">
+      <ng-content />
     </a>
   `,
   host: {
@@ -13,5 +18,6 @@ import { Component, Input } from '@angular/core';
   },
 })
 export class NavButtonComponent {
-  @Input() href = '';
+  route = input('');
+  fragment = input('');
 }
diff --git a/apps/angular/21-anchor-navigation/src/styles.scss b/apps/angular/21-anchor-navigation/src/styles.scss
index 77e408aa8..0f659a4f6 100644
--- a/apps/angular/21-anchor-navigation/src/styles.scss
+++ b/apps/angular/21-anchor-navigation/src/styles.scss
@@ -3,3 +3,6 @@
 @tailwind utilities;
 
 /* You can add global styles to this file, and also import other style files */
+html {
+  scroll-behavior: smooth;
+}
\ No newline at end of file