feat(anchorscrolling): new challenge

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

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

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { AnchorButtonComponent } from './anchor-button.component';
+
+@Component({
+  standalone: true,
+  imports: [AnchorButtonComponent],
+  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>
+  `,
+})
+export class AppComponent {}

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

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];