feat(doc): move reouter'input

apps/angular/router-input/src/app/app.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink, RouterModule } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, RouterModule, ReactiveFormsModule],
+  selector: 'app-root',
+  template: ` <label for="userName">UserName</label>
+    <input id="userName" type="text" [formControl]="userName" />
+    <label for="testId">TestId</label>
+    <input id="testId" type="number" [formControl]="testId" />
+    <button
+      [routerLink]="'test/' + testId.value"
+      [queryParams]="{ user: userName.value }">
+      Test
+    </button>
+    <button routerLink="/">HOME</button>
+    <router-outlet></router-outlet>`,
+})
+export class AppComponent {
+  userName = new FormControl();
+  testId = new FormControl();
+}

apps/angular/router-input/src/app/app.config.ts

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

apps/angular/router-input/src/app/app.routes.ts

@@ -0,0 +1,15 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    loadComponent: () => import('./home.component'),
+  },
+  {
+    path: 'test/:testId',
+    loadComponent: () => import('./test.component'),
+    data: {
+      permission: 'admin',
+    },
+  },
+];

apps/angular/router-input/src/app/home.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [],
+  template: `<div>Home</div>`,
+})
+export default class HomeComponent {}

apps/angular/router-input/src/app/test.component.ts

@@ -0,0 +1,21 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs';
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [AsyncPipe],
+  template: `
+    <div>TestId: {{ testId$ | async }}</div>
+    <div>Permission: {{ permission$ | async }}</div>
+    <div>User: {{ user$ | async }}</div>
+  `,
+})
+export default class TestComponent {
+  private activatedRoute = inject(ActivatedRoute);
+
+  testId$ = this.activatedRoute.params.pipe(map((p) => p['testId']));
+  permission$ = this.activatedRoute.data.pipe(map((d) => d['permission']));
+  user$ = this.activatedRoute.queryParams.pipe(map((q) => q['user']));
+}