feat(): create async redirect

Author: tomalaforge

.github/copilot-guidelines.md

@@ -0,0 +1,46 @@
+# GitHub Copilot Custom Guidelines
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Don't use explicit `standalone: true` (it is implied by default)
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- DO NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

apps/angular/60-async-redirect/src/app/admin-page.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-page-a',
+  template: `
+    <button
+      class="mb-4 rounded bg-gray-400 px-4 py-2 text-white"
+      routerLink="/">
+      Back
+    </button>
+    <h2>Page A (Admin)</h2>
+  `,
+
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
+})
+export class AdminPage {}

apps/angular/60-async-redirect/src/app/app.component.ts

@@ -3,10 +3,14 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZoneChangeDetection,
 } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
   ],
 };

apps/angular/60-async-redirect/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <router-outlet />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet],
+})
+export class App {}

apps/angular/60-async-redirect/src/app/app.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+import { UserProfileService } from './user-profile.service';
+
+@Component({
+  selector: 'app-dashboard',
+  template: `
+    <div class="mb-4 flex gap-2">
+      <button
+        class="rounded border border-black bg-white px-4 py-2 text-black hover:bg-gray-200"
+        routerLink="/profile">
+        Profile Page
+      </button>
+      <button
+        class="rounded border border-black bg-white px-4 py-2 text-black hover:bg-gray-200"
+        (click)="navigate()">
+        User Page
+      </button>
+    </div>
+    <router-outlet />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, RouterLink],
+})
+export class Dashboard {
+  private router = inject(Router);
+  private userProfile = inject(UserProfileService);
+
+  navigate() {
+    this.userProfile.getProfile().subscribe((profile) => {
+      void this.router.navigate(['/', profile]);
+    });
+  }
+}

apps/angular/60-async-redirect/src/app/dashboard.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { UserProfileService } from './user-profile.service';
+
+@Component({
+  selector: 'app-profile-page',
+  template: `
+    <button
+      class="mb-4 rounded bg-gray-400 px-4 py-2 text-white"
+      routerLink="/">
+      Back
+    </button>
+    <div class="mb-4 flex gap-2">
+      <button
+        class="rounded border border-black bg-white px-4 py-2 text-black hover:bg-gray-200"
+        (click)="chooseProfile('admin')">
+        Choose Admin Profile
+      </button>
+      <button
+        class="rounded border border-black bg-white px-4 py-2 text-black hover:bg-gray-200"
+        (click)="chooseProfile('user')">
+        Choose User Profile
+      </button>
+    </div>
+    <div class="text-lg font-semibold">
+      Current profile: {{ selectedProfile() }}
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
+})
+export class ProfilePage {
+  private userProfile = inject(UserProfileService);
+  selectedProfile = signal<'admin' | 'user'>('admin');
+
+  chooseProfile(profile: 'admin' | 'user') {
+    this.userProfile.setProfile(profile);
+    this.selectedProfile.set(profile);
+  }
+}

apps/angular/60-async-redirect/src/app/profile-page.ts

@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+import { AdminPage } from './admin-page';
+import { App } from './app';
+import { Dashboard } from './dashboard';
+import { ProfilePage } from './profile-page';
+import { UserPage } from './user-page';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: App,
+    children: [
+      { path: '', pathMatch: 'full', component: Dashboard },
+      { path: 'profile', component: ProfilePage },
+      { path: 'admin', component: AdminPage },
+      { path: 'user', component: UserPage },
+    ],
+  },
+  { path: '**', redirectTo: '', pathMatch: 'full' },
+];

apps/angular/60-async-redirect/src/app/routes.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-page-b',
+  template: `
+    <button
+      class="mb-4 rounded bg-gray-400 px-4 py-2 text-white"
+      routerLink="/">
+      Back
+    </button>
+    <h2>User page</h2>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
+})
+export class UserPage {}

apps/angular/60-async-redirect/src/app/user-page.ts

@@ -0,0 +1,16 @@
+import { Injectable, signal } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class UserProfileService {
+  private profile = signal<'admin' | 'user'>('admin');
+
+  setProfile(profile: 'admin' | 'user') {
+    this.profile.set(profile);
+  }
+
+  getProfile(): Observable<'admin' | 'user'> {
+    return of(this.profile()).pipe(delay(300));
+  }
+}