feat(doc): move anchor scrolling

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [RouterOutlet],
+  selector: 'app-root',
+  template: ` <router-outlet></router-outlet> `,
+})
+export class AppComponent {}

apps/angular/anchor-scrolling/src/app/app.config.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(appRoutes)],
+};

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

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

apps/angular/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/angular/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/angular/anchor-scrolling/src/app/nav-button.component.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, Input } from '@angular/core';
+@Component({
+  selector: 'nav-button',
+  standalone: true,
+  template: `
+    <a [href]="href">
+      <ng-content></ng-content>
+    </a>
+  `,
+  host: {
+    class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
+  },
+})
+export class NavButtonComponent {
+  @Input() href = '';
+}