25 คำถามสัมภาษณ์ Angular ยอดนิยม: คู่มือฉบับสมบูรณ์สู่ความสำเร็จ

// angular.module('app').controller('UserController', function($scope) {
//   $scope.user = { name: 'Alice' };
// });

// Angular (2+) - Component-based
// user.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    <div class="user-card">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserComponent {
  // Strong typing with TypeScript
  user = {
    name: 'Alice',
    email: 'alice@example.com'
  };
}

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

// Interface for strong typing
interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

@Component({
  // CSS selector to use the component
  selector: 'app-product-card',
  // Standalone = no NgModule needed
  standalone: true,
  // Dependency imports
  imports: [CommonModule],
  // Inline or external template (templateUrl)
  template: `
    <article class="product-card">
      <h3>{{ product.name }}</h3>
      <p class="price">{{ product.price | currency:'USD' }}</p>

      @if (product.inStock) {
        <button (click)="onAddToCart()">Add to Cart</button>
      } @else {
        <span class="out-of-stock">Out of Stock</span>
      }
    </article>
  `,
  // Encapsulated styles by default
  styles: [`
    .product-card { padding: 1rem; border: 1px solid #e0e0e0; }
    .price { font-weight: bold; color: #2563eb; }
    .out-of-stock { color: #dc2626; }
  `]
})
export class ProductCardComponent {
  // Input: data from parent
  @Input({ required: true }) product!: Product;

  // Output: events to parent
  @Output() addToCart = new EventEmitter<number>();

  onAddToCart() {
    this.addToCart.emit(this.product.id);
  }
}

import {
  Component,
  OnInit,
  OnChanges,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked,
  OnDestroy,
  Input,
  SimpleChanges
} from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `<p>{{ data }}</p>`
})
export class LifecycleDemoComponent implements
  OnInit, OnChanges, DoCheck, AfterContentInit,
  AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() data = '';

  // 1. Called when an @Input changes (before ngOnInit)
  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges', changes);
  }

  // 2. Called once after the first ngOnChanges
  // Ideal for initializations
  ngOnInit() {
    console.log('ngOnInit - Component initialization');
  }

  // 3. Called on every change detection cycle
  // Use with caution (performance)
  ngDoCheck() {
    console.log('ngDoCheck');
  }

  // 4. After content projection (ng-content)
  ngAfterContentInit() {
    console.log('ngAfterContentInit');
  }

  // 5. After each projected content check
  ngAfterContentChecked() {
    console.log('ngAfterContentChecked');
  }

  // 6. After component view initialization
  // @ViewChild references are available here
  ngAfterViewInit() {
    console.log('ngAfterViewInit - View initialized');
  }

  // 7. After each view check
  ngAfterViewChecked() {
    console.log('ngAfterViewChecked');
  }

  // 8. Just before component destruction
  // Cleanup: unsubscribe, clearInterval, etc.
  ngOnDestroy() {
    console.log('ngOnDestroy - Cleanup');
  }
}

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-data-binding',
  standalone: true,
  imports: [FormsModule],
  template: `
    <!-- 1. Interpolation: component → template -->
    <h1>{{ title }}</h1>
    <p>{{ getFullName() }}</p>

    <!-- 2. Property Binding: component → DOM property -->
    <img [src]="imageUrl" [alt]="imageAlt">
    <button [disabled]="isLoading">Submit</button>

    <!-- 3. Event Binding: template → component -->
    <button (click)="handleClick()">Click</button>
    <input (keyup.enter)="onEnter($event)">

    <!-- 4. Two-way Binding: bidirectional -->
    <input [(ngModel)]="username">
    <p>Hello, {{ username }}</p>
  `
})
export class DataBindingComponent {
  // Properties for interpolation
  title = 'My Application';
  firstName = 'John';
  lastName = 'Doe';

  // Properties for property binding
  imageUrl = '/assets/logo.png';
  imageAlt = 'Application logo';
  isLoading = false;

  // Property for two-way binding
  username = '';

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  handleClick(): void {
    console.log('Button clicked');
  }

  onEnter(event: KeyboardEvent): void {
    const target = event.target as HTMLInputElement;
    console.log('Entered value:', target.value);
  }
}

// Traditional approach with NgModule
// products.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list.component';
import { ProductCardComponent } from './product-card.component';
import { ProductService } from './product.service';

@NgModule({
  // Components belonging to this module
  declarations: [
    ProductListComponent,
    ProductCardComponent
  ],
  // Modules needed
  imports: [CommonModule],
  // Components usable outside
  exports: [ProductListComponent],
  // Services with module scope
  providers: [ProductService]
})
export class ProductsModule {}

// Modern approach with Standalone Components
// product-list.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductCardComponent } from './product-card.component';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',
  // No NgModule needed
  standalone: true,
  // Direct dependency imports
  imports: [CommonModule, ProductCardComponent],
  template: `
    @for (product of products(); track product.id) {
      <app-product-card [product]="product" />
    }
  `
})
export class ProductListComponent {
  // Modern injection with inject()
  private productService = inject(ProductService);

  products = this.productService.getProducts();
}

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';

interface User {
  id: number;
  name: string;
  email: string;
}

// providedIn: 'root' = singleton at application level
@Injectable({ providedIn: 'root' })
export class UserService {
  // Modern injection with inject()
  private http = inject(HttpClient);

  // Shared reactive state
  private currentUser$ = new BehaviorSubject<User | null>(null);

  // Public API
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }

  getUserById(id: number): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }

  setCurrentUser(user: User): void {
    this.currentUser$.next(user);
  }

  getCurrentUser(): Observable<User | null> {
    return this.currentUser$.asObservable();
  }
}

// Usage in a component
// user-profile.component.ts
@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    @if (user$ | async; as user) {
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    }
  `
})
export class UserProfileComponent implements OnInit {
  // Injection via inject() (recommended)
  private userService = inject(UserService);

  user$!: Observable<User | null>;

  ngOnInit() {
    this.user$ = this.userService.getCurrentUser();
  }
}

// Single instance shared across the entire application
@Injectable({ providedIn: 'root' })
export class AuthService {
  private isAuthenticated = false;

  login() { this.isAuthenticated = true; }
  logout() { this.isAuthenticated = false; }
  isLoggedIn() { return this.isAuthenticated; }
}

// 2. providedIn: 'any' - Instance per lazy-loaded module
// Each lazy-loaded module gets its own instance
@Injectable({ providedIn: 'any' })
export class FeatureLoggerService {
  private logs: string[] = [];

  log(message: string) {
    this.logs.push(`[${new Date().toISOString()}] ${message}`);
  }
}

// 3. providedIn: 'platform' - Shared between applications
// Useful for micro-frontends or multi-app setups
@Injectable({ providedIn: 'platform' })
export class SharedConfigService {
  readonly apiUrl = 'https://api.example.com';
}

// 4. Component-level provision - Instance per component
@Component({
  selector: 'app-editor',
  standalone: true,
  // Each component instance has its own service instance
  providers: [EditorStateService],
  template: `...`
})
export class EditorComponent {
  private editorState = inject(EditorStateService);
}

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
  Observable,
  Subject,
  debounceTime,
  distinctUntilChanged,
  switchMap,
  catchError,
  of,
  map,
  tap
} from 'rxjs';

interface SearchResult {
  id: number;
  title: string;
  description: string;
}

@Injectable({ providedIn: 'root' })
export class SearchService {
  private http = inject(HttpClient);

  search(term: string): Observable<SearchResult[]> {
    return this.http.get<SearchResult[]>(`/api/search?q=${term}`);
  }
}

// search.component.ts
@Component({
  selector: 'app-search',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <input [formControl]="searchControl" placeholder="Search...">

    @if (isLoading) {
      <div class="loading">Loading...</div>
    }

    <ul>
      @for (result of results$ | async; track result.id) {
        <li>{{ result.title }}</li>
      }
    </ul>
  `
})
export class SearchComponent implements OnInit, OnDestroy {
  private searchService = inject(SearchService);
  private destroy$ = new Subject<void>();

  searchControl = new FormControl('');
  results$!: Observable<SearchResult[]>;
  isLoading = false;

  ngOnInit() {
    this.results$ = this.searchControl.valueChanges.pipe(
      // Wait 300ms after the last keystroke
      debounceTime(300),
      // Ignore if value hasn't changed
      distinctUntilChanged(),
      // Show loading
      tap(() => this.isLoading = true),
      // Cancel previous request and launch new one
      switchMap(term =>
        term ? this.searchService.search(term) : of([])
      ),
      // Hide loading
      tap(() => this.isLoading = false),
      // Handle errors
      catchError(error => {
        console.error('Search error:', error);
        this.isLoading = false;
        return of([]);
      })
    );
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div class="counter">
      <h2>Counter: {{ count() }}</h2>
      <p>Double: {{ doubleCount() }}</p>
      <p>Message: {{ message() }}</p>

      <button (click)="increment()">+1</button>
      <button (click)="decrement()">-1</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  // Writable signal - modifiable value
  count = signal(0);

  // Computed signal - automatically derived
  // Recalculated only when count() changes
  doubleCount = computed(() => this.count() * 2);

  // Computed with conditional logic
  message = computed(() => {
    const value = this.count();
    if (value < 0) return 'Negative value';
    if (value === 0) return 'Zero';
    if (value < 10) return 'Small number';
    return 'Large number';
  });

  constructor() {
    // Effect - executed on every change of used signals
    // Useful for side effects (logs, localStorage, etc.)
    effect(() => {
      console.log(`New value: ${this.count()}`);
      localStorage.setItem('counter', String(this.count()));
    });
  }

  increment() {
    // update() to modify based on previous value
    this.count.update(value => value + 1);
  }

  decrement() {
    this.count.update(value => value - 1);
  }

  reset() {
    // set() to directly set a value
    this.count.set(0);
  }
}

import { Component, input, output, computed } from '@angular/core';

interface Task {
  id: number;
  title: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
}

@Component({
  selector: 'app-task-item',
  standalone: true,
  template: `
    <div class="task" [class.completed]="task().completed">
      <input
        type="checkbox"
        [checked]="task().completed"
        (change)="onToggle()"
      >

      <span class="title">{{ task().title }}</span>
      <span class="priority" [class]="priorityClass()">
        {{ task().priority }}
      </span>

      @if (showActions()) {
        <button (click)="onDelete()">Delete</button>
      }
    </div>
  `
})
export class TaskItemComponent {
  // Required input - must be provided by parent
  task = input.required<Task>();

  // Optional input with default value
  showActions = input(true);

  // Signal-based output
  toggle = output<number>();
  delete = output<number>();

  // Computed based on input
  priorityClass = computed(() => `priority-${this.task().priority}`);

  onToggle() {
    this.toggle.emit(this.task().id);
  }

  onDelete() {
    this.delete.emit(this.task().id);
  }
}

// Usage in parent
// task-list.component.ts
@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [TaskItemComponent],
  template: `
    @for (task of tasks(); track task.id) {
      <app-task-item
        [task]="task"
        [showActions]="canEdit()"
        (toggle)="onToggleTask($event)"
        (delete)="onDeleteTask($event)"
      />
    }
  `
})
export class TaskListComponent {
  tasks = signal<Task[]>([
    { id: 1, title: 'Learn Angular', completed: false, priority: 'high' },
    { id: 2, title: 'Build a project', completed: false, priority: 'medium' }
  ]);

  canEdit = signal(true);

  onToggleTask(id: number) {
    this.tasks.update(tasks =>
      tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t)
    );
  }

  onDeleteTask(id: number) {
    this.tasks.update(tasks => tasks.filter(t => t.id !== id));
  }
}

import { Component, signal } from '@angular/core';

interface User {
  id: number;
  name: string;
  role: 'admin' | 'user' | 'guest';
  status: 'active' | 'inactive' | 'pending';
}

@Component({
  selector: 'app-modern-control-flow',
  standalone: true,
  template: `
    <!-- @if replaces *ngIf -->
    @if (isLoading()) {
      <div class="loading">Loading...</div>
    } @else if (error()) {
      <div class="error">{{ error() }}</div>
    } @else {
      <div class="content">
        <h2>Users ({{ users().length }})</h2>

        <!-- @for replaces *ngFor -->
        <!-- track is mandatory for performance -->
        @for (user of users(); track user.id; let i = $index, first = $first, last = $last) {
          <div class="user" [class.first]="first" [class.last]="last">
            <span class="index">{{ i + 1 }}.</span>
            <span class="name">{{ user.name }}</span>

            <!-- @switch replaces *ngSwitch -->
            @switch (user.role) {
              @case ('admin') {
                <span class="badge admin">Administrator</span>
              }
              @case ('user') {
                <span class="badge user">User</span>
              }
              @default {
                <span class="badge guest">Guest</span>
              }
            }
          </div>
        } @empty {
          <!-- Block shown if collection is empty -->
          <p>No users found</p>
        }
      </div>
    }
  `
})
export class ModernControlFlowComponent {
  isLoading = signal(false);
  error = signal<string | null>(null);
  users = signal<User[]>([
    { id: 1, name: 'Alice', role: 'admin', status: 'active' },
    { id: 2, name: 'Bob', role: 'user', status: 'active' },
    { id: 3, name: 'Charlie', role: 'guest', status: 'pending' }
  ]);
}

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    // Component loaded immediately
    loadComponent: () => import('./home/home.component')
      .then(m => m.HomeComponent)
  },
  {
    path: 'products',
    // Lazy loading a standalone component
    loadComponent: () => import('./products/product-list.component')
      .then(m => m.ProductListComponent)
  },
  {
    path: 'admin',
    // Lazy loading child routes
    loadChildren: () => import('./admin/admin.routes')
      .then(m => m.adminRoutes),
    // Guard for authentication
    canActivate: [authGuard]
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
    // Inline child routes
    children: [
      {
        path: 'stats',
        loadComponent: () => import('./dashboard/stats/stats.component')
          .then(m => m.StatsComponent)
      },
      {
        path: 'settings',
        loadComponent: () => import('./dashboard/settings/settings.component')
          .then(m => m.SettingsComponent)
      }
    ]
  }
];

// admin/admin.routes.ts
import { Routes } from '@angular/router';

export const adminRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./admin-layout.component')
      .then(m => m.AdminLayoutComponent),
    children: [
      {
        path: 'users',
        loadComponent: () => import('./users/users.component')
          .then(m => m.UsersComponent)
      },
      {
        path: 'reports',
        loadComponent: () => import('./reports/reports.component')
          .then(m => m.ReportsComponent)
      }
    ]
  }
];

// main.ts - Bootstrap with routes
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

// TEMPLATE-DRIVEN FORMS
// Simple, declarative, suited for basic forms
// template-form.component.ts
import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';

@Component({
  selector: 'app-template-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
      <input
        name="email"
        type="email"
        [(ngModel)]="user.email"
        required
        email
        #emailField="ngModel"
      >
      @if (emailField.invalid && emailField.touched) {
        <span class="error">Invalid email</span>
      }

      <input
        name="password"
        type="password"
        [(ngModel)]="user.password"
        required
        minlength="8"
        #passwordField="ngModel"
      >
      @if (passwordField.errors?.['minlength']) {
        <span class="error">Minimum 8 characters</span>
      }

      <button type="submit" [disabled]="loginForm.invalid">
        Login
      </button>
    </form>
  `
})
export class TemplateFormComponent {
  user = { email: '', password: '' };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form data:', this.user);
    }
  }
}

// REACTIVE FORMS
// More control, testable, suited for complex forms
// reactive-form.component.ts
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" type="email">
      @if (loginForm.get('email')?.hasError('required') && loginForm.get('email')?.touched) {
        <span class="error">Email required</span>
      }
      @if (loginForm.get('email')?.hasError('email')) {
        <span class="error">Invalid email format</span>
      }

      <input formControlName="password" type="password">
      @if (loginForm.get('password')?.hasError('minlength')) {
        <span class="error">Minimum 8 characters</span>
      }

      <button type="submit" [disabled]="loginForm.invalid">
        Login
      </button>
    </form>
  `
})
export class ReactiveFormComponent {
  private fb = inject(FormBuilder);

  // Programmatic form definition
  loginForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]]
  });

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('Form data:', this.loginForm.value);
    }
  }
}

import { AbstractControl, ValidationErrors, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
import { Observable, of, map, delay } from 'rxjs';

// Synchronous validator - checks immediately
export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = forbiddenName.test(control.value);
    return forbidden ? { forbiddenName: { value: control.value } } : null;
  };
}

// Password confirmation validator
export function passwordMatchValidator(): ValidatorFn {
  return (group: AbstractControl): ValidationErrors | null => {
    const password = group.get('password')?.value;
    const confirmPassword = group.get('confirmPassword')?.value;

    return password === confirmPassword ? null : { passwordMismatch: true };
  };
}

// Asynchronous validator - checks via API
export function uniqueEmailValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    if (!control.value) {
      return of(null);
    }

    return userService.checkEmailExists(control.value).pipe(
      map(exists => exists ? { emailTaken: true } : null)
    );
  };
}

// Usage in a component
// registration.component.ts
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { forbiddenNameValidator, passwordMatchValidator, uniqueEmailValidator } from './validators/custom.validators';
import { UserService } from './user.service';

@Component({
  selector: 'app-registration',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <div>
        <input formControlName="username" placeholder="Username">
        @if (registrationForm.get('username')?.hasError('forbiddenName')) {
          <span class="error">This name is not allowed</span>
        }
      </div>

      <div>
        <input formControlName="email" type="email" placeholder="Email">
        @if (registrationForm.get('email')?.pending) {
          <span class="info">Checking...</span>
        }
        @if (registrationForm.get('email')?.hasError('emailTaken')) {
          <span class="error">This email is already in use</span>
        }
      </div>

      <div formGroupName="passwords">
        <input formControlName="password" type="password" placeholder="Password">
        <input formControlName="confirmPassword" type="password" placeholder="Confirm">
        @if (registrationForm.get('passwords')?.hasError('passwordMismatch')) {
          <span class="error">Passwords do not match</span>
        }
      </div>

      <button type="submit" [disabled]="registrationForm.invalid || registrationForm.pending">
        Sign Up
      </button>
    </form>
  `
})
export class RegistrationComponent {
  private fb = inject(FormBuilder);
  private userService = inject(UserService);

  registrationForm = this.fb.group({
    username: ['', [
      Validators.required,
      forbiddenNameValidator(/admin/i)
    ]],
    email: ['',
      [Validators.required, Validators.email],
      [uniqueEmailValidator(this.userService)]
    ],
    passwords: this.fb.group({
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required]
    }, { validators: passwordMatchValidator() })
  });

  onSubmit() {
    if (this.registrationForm.valid) {
      console.log(this.registrationForm.value);
    }
  }
}

import { inject } from '@angular/core';
import { Router, CanActivateFn, CanMatchFn } from '@angular/router';
import { AuthService } from '../services/auth.service';

// Functional guard (recommended since Angular 15+)
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  // Redirect to login page with return URL
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// Role-based guard
export const roleGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  const requiredRoles = route.data['roles'] as string[];
  const userRole = authService.getUserRole();

  if (requiredRoles.includes(userRole)) {
    return true;
  }

  return router.createUrlTree(['/unauthorized']);
};

// Guard for lazy loading (canMatch)
export const featureGuard: CanMatchFn = (route, segments) => {
  const featureService = inject(FeatureService);
  return featureService.isFeatureEnabled(route.path || '');
};

// Route configuration with guards
// app.routes.ts
export const routes: Routes = [
  { path: 'login', loadComponent: () => import('./login.component') },

  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard.component'),
    canActivate: [authGuard]
  },

  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes'),
    canActivate: [authGuard, roleGuard],
    canMatch: [featureGuard],
    data: { roles: ['admin', 'superadmin'] }
  },

  {
    path: 'settings',
    loadComponent: () => import('./settings.component'),
    canActivate: [authGuard],
    // Guard for leaving page (unsaved data)
    canDeactivate: [unsavedChangesGuard]
  }
];

// Guard for unsaved changes
export const unsavedChangesGuard: CanDeactivateFn<{ hasUnsavedChanges: () => boolean }> =
  (component) => {
    if (component.hasUnsavedChanges()) {
      return confirm('Unsaved changes will be lost. Continue?');
    }
    return true;
  };

// app.routes.ts
export const routes: Routes = [
  { path: 'products/:id', loadComponent: () => import('./product-detail.component') }
];

// product-detail.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `<h1>Product {{ productId }}</h1>`
})
export class ProductDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  productId!: string;

  ngOnInit() {
    // Access route parameters
    this.productId = this.route.snapshot.paramMap.get('id')!;

    // Or reactively
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id')!;
    });
  }
}

// 2. Query Parameters (?key=value)
// navigation.component.ts
import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navigation',
  standalone: true,
  template: `
    <button (click)="navigateWithQuery()">Search</button>
  `
})
export class NavigationComponent {
  private router = inject(Router);

  navigateWithQuery() {
    this.router.navigate(['/products'], {
      queryParams: { category: 'electronics', sort: 'price' }
    });
  }
}

// 3. State (data not visible in URL)
// order-confirmation.component.ts
@Component({
  selector: 'app-order-confirmation',
  standalone: true,
  template: `
    @if (orderData) {
      <h1>Order #{{ orderData.orderId }} confirmed</h1>
    }
  `
})
export class OrderConfirmationComponent implements OnInit {
  private route = inject(ActivatedRoute);
  orderData: any;

  ngOnInit() {
    // Retrieve state passed via navigation
    this.orderData = history.state;
  }
}

// Navigate with state
this.router.navigate(['/order-confirmation'], {
  state: { orderId: '12345', total: 99.99 }
});

// 4. Resolvers (data pre-loading)
// product.resolver.ts
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { ProductService } from './product.service';

export const productResolver: ResolveFn<Product> = (route) => {
  const productService = inject(ProductService);
  const id = route.paramMap.get('id')!;
  return productService.getProduct(id);
};

// Route with resolver
{
  path: 'products/:id',
  loadComponent: () => import('./product-detail.component'),
  resolve: { product: productResolver }
}

// Access resolved data
ngOnInit() {
  this.product = this.route.snapshot.data['product'];
}

import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  inject,
  signal
} from '@angular/core';

// Default strategy: checks entire component tree
@Component({
  selector: 'app-default-strategy',
  template: `<p>{{ data }}</p>`
})
export class DefaultStrategyComponent {
  data = 'Hello';
}

// OnPush strategy: checks only if inputs change
// or if an event is triggered within the component
@Component({
  selector: 'app-onpush-strategy',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>{{ data().name }}</p>
    <button (click)="update()">Update</button>
  `
})
export class OnPushStrategyComponent {
  private cdr = inject(ChangeDetectorRef);

  // Signal: automatically triggers detection
  data = signal({ name: 'Alice' });

  update() {
    // With signal, update is automatic
    this.data.set({ name: 'Bob' });
  }

  // For cases where manual detection is needed
  manualUpdate() {
    // Mark component for checking
    this.cdr.markForCheck();

    // Or force immediate detection
    this.cdr.detectChanges();
  }
}

// Practical example: optimized list
@Component({
  selector: 'app-optimized-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (item of items(); track item.id) {
      <!-- Each item has its own OnPush component -->
      <app-list-item [item]="item" />
    }
  `
})
export class OptimizedListComponent {
  items = signal<Item[]>([]);

  addItem(item: Item) {
    // Create new array to trigger detection
    this.items.update(current => [...current, item]);
  }

  updateItem(id: number, changes: Partial<Item>) {
    this.items.update(current =>
      current.map(item =>
        item.id === id ? { ...item, ...changes } : item
      )
    );
  }
}

// 2. TrackBy for lists (mandatory with @for)
@Component({
  template: `
    @for (user of users(); track user.id) {
      <app-user-card [user]="user" />
    }
  `
})
export class UserListComponent {
  users = signal<User[]>([]);
}

// 3. Pure pipes for transformations
// format-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatDate',
  standalone: true,
  pure: true // Default, recalculated only if input changes
})
export class FormatDatePipe implements PipeTransform {
  transform(value: Date, format: string = 'short'): string {
    return new Intl.DateTimeFormat('en-US', {
      dateStyle: format as any
    }).format(value);
  }
}

// 4. Virtual Scrolling for large lists
import { Component } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-virtual-list',
  standalone: true,
  imports: [ScrollingModule],
  template: `
    <!-- Only visible elements are rendered -->
    <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
      <div *cdkVirtualFor="let item of items" class="item">
        {{ item.name }}
      </div>
    </cdk-virtual-scroll-viewport>
  `,
  styles: [`
    .viewport { height: 400px; }
    .item { height: 50px; }
  `]
})
export class VirtualListComponent {
  items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`
  }));
}

// 5. Defer for deferred loading (Angular 17+)
@Component({
  template: `
    <header>Always loaded immediately</header>

    <!-- Loaded when visible in viewport -->
    @defer (on viewport) {
      <app-heavy-component />
    } @placeholder {
      <div class="skeleton">Loading...</div>
    } @loading (minimum 500ms) {
      <app-spinner />
    }

    <!-- Loaded after interaction -->
    @defer (on interaction) {
      <app-comments />
    } @placeholder {
      <button>Show comments</button>
    }

    <!-- Loaded after a delay -->
    @defer (on timer(2000ms)) {
      <app-analytics />
    }
  `
})
export class OptimizedPageComponent {}

// parent.component.ts
@Component({
  template: `<app-child [message]="parentMessage" />`
})
export class ParentComponent {
  parentMessage = 'Hello from parent';
}

// child.component.ts
@Component({
  template: `<p>{{ message() }}</p>`
})
export class ChildComponent {
  message = input.required<string>();
}

// 2. Child → Parent: @Output / output()
// child.component.ts
@Component({
  template: `<button (click)="sendMessage()">Send</button>`
})
export class ChildComponent {
  messageEvent = output<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child');
  }
}

// parent.component.ts
@Component({
  template: `<app-child (messageEvent)="onMessage($event)" />`
})
export class ParentComponent {
  onMessage(message: string) {
    console.log(message);
  }
}

// 3. Via shared Service (unrelated components)
// message.service.ts
@Injectable({ providedIn: 'root' })
export class MessageService {
  private messageSubject = new Subject<string>();
  message$ = this.messageSubject.asObservable();

  // Or with Signal
  currentMessage = signal<string>('');

  sendMessage(message: string) {
    this.messageSubject.next(message);
    this.currentMessage.set(message);
  }
}

// component-a.ts
@Component({
  template: `<button (click)="send()">Send</button>`
})
export class ComponentA {
  private messageService = inject(MessageService);

  send() {
    this.messageService.sendMessage('Hello from A');
  }
}

// component-b.ts
@Component({
  template: `<p>{{ message$ | async }}</p>`
})
export class ComponentB implements OnDestroy {
  private messageService = inject(MessageService);
  private destroy$ = new Subject<void>();

  message$ = this.messageService.message$;

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// 4. ViewChild to access a child
@Component({
  template: `<app-timer #timer />`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('timer') timerComponent!: TimerComponent;

  ngAfterViewInit() {
    this.timerComponent.start();
  }
}

// 5. ContentChild for projected content
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content select="[card-header]" />
      <ng-content />
    </div>
  `
})
export class CardComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;

  ngAfterContentInit() {
    console.log('Header content:', this.header);
  }
}

import { Injectable, signal, computed } from '@angular/core';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  loading: boolean;
  error: string | null;
}

@Injectable({ providedIn: 'root' })
export class CartStore {
  // Private state
  private state = signal<CartState>({
    items: [],
    loading: false,
    error: null
  });

  // Public selectors (read-only)
  readonly items = computed(() => this.state().items);
  readonly loading = computed(() => this.state().loading);
  readonly error = computed(() => this.state().error);

  readonly itemCount = computed(() =>
    this.state().items.reduce((sum, item) => sum + item.quantity, 0)
  );

  readonly total = computed(() =>
    this.state().items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    )
  );

  readonly isEmpty = computed(() => this.state().items.length === 0);

  // Actions
  addItem(product: Omit<CartItem, 'quantity'>) {
    this.state.update(state => {
      const existingItem = state.items.find(i => i.id === product.id);

      if (existingItem) {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === product.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          )
        };
      }

      return {
        ...state,
        items: [...state.items, { ...product, quantity: 1 }]
      };
    });
  }

  removeItem(id: number) {
    this.state.update(state => ({
      ...state,
      items: state.items.filter(item => item.id !== id)
    }));
  }

  updateQuantity(id: number, quantity: number) {
    if (quantity <= 0) {
      this.removeItem(id);
      return;
    }

    this.state.update(state => ({
      ...state,
      items: state.items.map(item =>
        item.id === id ? { ...item, quantity } : item
      )
    }));
  }

  clearCart() {
    this.state.update(state => ({ ...state, items: [] }));
  }

  // Async action
  async checkout() {
    this.state.update(s => ({ ...s, loading: true, error: null }));

    try {
      // API call
      await fetch('/api/checkout', {
        method: 'POST',
        body: JSON.stringify({ items: this.items() })
      });

      this.clearCart();
    } catch (e) {
      this.state.update(s => ({
        ...s,
        error: 'Order error'
      }));
    } finally {
      this.state.update(s => ({ ...s, loading: false }));
    }
  }
}

// Usage in a component
// cart.component.ts
@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    @if (cartStore.isEmpty()) {
      <p>Your cart is empty</p>
    } @else {
      @for (item of cartStore.items(); track item.id) {
        <div class="cart-item">
          <span>{{ item.name }}</span>
          <span>{{ item.price }} $ × {{ item.quantity }}</span>
          <button (click)="cartStore.removeItem(item.id)">Remove</button>
        </div>
      }

      <div class="cart-total">
        <strong>Total: {{ cartStore.total() }} $</strong>
        <span>({{ cartStore.itemCount() }} items)</span>
      </div>

      <button
        (click)="cartStore.checkout()"
        [disabled]="cartStore.loading()"
      >
        @if (cartStore.loading()) {
          Processing...
        } @else {
          Checkout
        }
      </button>
    }
  `
})
export class CartComponent {
  cartStore = inject(CartStore);
}