feat(anchorScrolling): create challenge

apps/anchor-scrolling/src/app/app.component.ts

@@ -1,19 +1,10 @@
 import { Component } from '@angular/core';
-import { AnchorButtonComponent } from './anchor-button.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [AnchorButtonComponent],
+  imports: [RouterOutlet],
   selector: 'app-root',
-  template: `
-    <div id="top" class="h-screen bg-gray-500">
-      Empty
-      <anchor-button href="#bottom">Scroll Bottom</anchor-button>
-    </div>
-    <div id="bottom" class="h-screen bg-blue-300">
-      I want to scroll each
-      <anchor-button href="#top">Scroll Top</anchor-button>
-    </div>
-  `,
+  template: ` <router-outlet></router-outlet> `,
 })
 export class AppComponent {}

apps/anchor-scrolling/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
+import { FooComponent } from './foo.component';
+import { HomeComponent } from './home.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  { path: 'home', component: HomeComponent },
+  { path: 'foo', component: FooComponent },
+  { path: '**', redirectTo: 'home' },
+];

apps/anchor-scrolling/src/app/foo.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NavButtonComponent } from './nav-button.component';
+
+@Component({
+  standalone: true,
+  imports: [NavButtonComponent],
+  selector: 'app-foo',
+  template: `
+    Welcome to foo page
+    <nav-button href="home" class="fixed top-3 left-1/2">Home Page</nav-button>
+    <div class="h-screen bg-blue-200">section 1</div>
+    <div class="h-screen bg-red-200">section 2</div>
+  `,
+})
+export class FooComponent {}

apps/anchor-scrolling/src/app/home.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NavButtonComponent } from './nav-button.component';
+
+@Component({
+  standalone: true,
+  imports: [NavButtonComponent],
+  selector: 'app-home',
+  template: `
+    <nav-button href="/foo" class="fixed top-3 left-1/2">Foo Page</nav-button>
+    <div id="top" class="h-screen bg-gray-500">
+      Empty
+      <nav-button href="#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>
+    </div>
+  `,
+})
+export class HomeComponent {}

apps/anchor-scrolling/src/app/nav-button.component.ts

@@ -1,12 +1,10 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Input } from '@angular/core';
-import { RouterLinkWithHref } from '@angular/router';
 @Component({
-  selector: 'anchor-button',
+  selector: 'nav-button',
   standalone: true,
-  imports: [RouterLinkWithHref],
   template: `
-    <a [routerLink]="href">
+    <a [href]="href">
       <ng-content></ng-content>
     </a>
   `,
@@ -14,6 +12,6 @@ import { RouterLinkWithHref } from '@angular/router';
     class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
   },
 })
-export class AnchorButtonComponent {
-  @Input() href = '#top';
+export class NavButtonComponent {
+  @Input() href = '';
 }

apps/anchor-scrolling/src/main.ts

@@ -1,11 +1,8 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  provideRouter,
-  withEnabledBlockingInitialNavigation,
-} from '@angular/router';
+import { provideRouter } from '@angular/router';
 import { AppComponent } from './app/app.component';
 import { appRoutes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
+  providers: [provideRouter(appRoutes)],
 }).catch((err) => console.error(err));