Change Detection Implementation Comparison:

Angular (Zone.js-based change detection):

// Component with OnPush change detection strategy
@Component({
  selector: 'app-performance',
  template: '<div>{{data.value}}</div>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PerformanceComponent {
  @Input() data: {value: string};
  
  // Only re-renders when input reference changes
}
        

AngularJS (Digest cycle):

angular.module('myApp').controller('PerformanceController', function($scope) {
  $scope.data = {value: 'initial'};
  
  // This would trigger digest cycle for the entire app
  $scope.$watch('data', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      // Handle changes
    }
  }, true);  // Deep watch is especially expensive
});
        

Advanced Module Configuration Example:

@NgModule({
  declarations: [
    /* Components, directives, and pipes */
  ],
  imports: [
    CommonModule,
    /* Other module dependencies */
    RouterModule.forChild([
      { 
        path: 'feature', 
        component: FeatureComponent,
        canActivate: [AuthGuard]
      }
    ])
  ],
  providers: [
    FeatureService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    },
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    }
  ],
  exports: [
    /* Public API components */
  ]
})
export class FeatureModule { }
        

Change Detection Implementation:

@Component({
  selector: 'app-performance',
  template: `<div>{{data}}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PerformanceComponent implements OnInit {
  data: string;
  
  constructor(
    private dataService: DataService,
    private cd: ChangeDetectorRef
  ) {}

  ngOnInit() {
    // Only trigger change detection when new data arrives
    this.dataService.getData().pipe(
      distinctUntilChanged()
    ).subscribe(newData => {
      this.data = newData;
      this.cd.markForCheck(); // Mark component for checking
    });
  }
}
        

Advanced Component Communication Architecture:

// State service with Observable store pattern
@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  // Private subjects
  private userSubject = new BehaviorSubject<User | null>(null);
  private loadingSubject = new BehaviorSubject<boolean>(false);
  private errorSubject = new BehaviorSubject<string | null>(null);
  
  // Public observables (read-only)
  readonly user$ = this.userSubject.asObservable();
  readonly loading$ = this.loadingSubject.asObservable();
  readonly error$ = this.errorSubject.asObservable();
  
  // Derived state
  readonly isAuthenticated$ = this.user$.pipe(
    map(user => !!user)
  );
  
  constructor(private http: HttpClient) {}
  
  loadUser(id: string): Observable<User> {
    this.loadingSubject.next(true);
    this.errorSubject.next(null);
    
    return this.http.get<User>(`/api/users/${id}`).pipe(
      tap(user => {
        this.userSubject.next(user);
        this.loadingSubject.next(false);
      }),
      catchError(err => {
        this.errorSubject.next(err.message);
        this.loadingSubject.next(false);
        return throwError(err);
      })
    );
  }
}
        

Component Creation - Manual vs. CLI

While the CLI is preferred, understanding manual component creation illustrates the architecture better:

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.Emulated
})
export class UserProfileComponent implements OnInit {
  @Input() userId: string;
  @Output() userUpdated = new EventEmitter<any>();
  
  constructor(private userService: UserService) {}
  
  ngOnInit(): void {
    // Lifecycle hook initialization
  }
  
  updateUser(): void {
    // Logic
    this.userUpdated.emit({...});
  }
}
        

Interpolation and Expression Evaluation

Interpolation ({{expression}}) is syntactic sugar for property binding. Angular evaluates the expression in the component context and converts it to a string:

<h1>Hello, {{ user.name }}!</h1>


<p>Total: {{ calculateTotal() | currency }}!</p>


<div>{{ user?.profile?.bio || 'No bio available' }}</div>
        

Under the hood, Angular creates an internal property binding to a generated property on the host element.

Property Binding Architecture

Property binding ([property]="expression") sets an element property to the value of an expression:

<img [src]="user.avatarUrl" [alt]="user.name">


<app-user-profile [userId]="selectedId" [editable]="hasPermission"></app-user-profile>


<div [attr.aria-label]="descriptionLabel"></div>


<div [class.active]="isActive"></div>
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"></div>


<div [style.color]="textColor"></div>
<div [style.width.px]="elementWidth"></div>
<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}"></div>
        

Event Binding and Event Handling

Event binding ((event)="handler") connects DOM events to component methods:

<button (click)="saveData()">Save</button>


<input (input)="handleInput($event)">


<input (keyup.enter)="onEnterKey($event)">


<app-item-list (itemSelected)="onItemSelected($event)"></app-item-list>
        

// Component method
handleInput(event: Event): void {
  const inputValue = (event.target as HTMLInputElement).value;
  // Process input
}
        

Two-way Binding Implementation

Two-way binding [(ngModel)]="property" is syntactic sugar that combines property and event binding:

<input [(ngModel)]="username">


<input [ngModel]="username" (ngModelChange)="username = $event">
        

Creating Custom Two-way Binding

@Component({
  selector: 'custom-input',
  template: ``
})
export class CustomInputComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter();
  
  updateValue(event: Event) {
    const newValue = (event.target as HTMLInputElement).value;
    this.valueChange.emit(newValue);
  }
}
        

Usage of custom two-way binding:

<custom-input [(value)]="username"></custom-input>
        

<div *ngIf="condition">Content</div>


<ng-template [ngIf]="condition">
  <div>Content</div>
</ng-template>
        

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string = 'yellow';
  
  constructor(private el: ElementRef) {}
  
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor);
  }
  
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  
  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
        

Creating a Custom Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exponentialStrength',
  pure: true // This is default, can be omitted
})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: number = 1): number {
    return Math.pow(value, exponent);
  }
}
        

Impure Pipe Example (Filter Pipe):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false // This makes it an impure pipe
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    
    searchText = searchText.toLowerCase();
    
    return items.filter(item => {
      return item.name.toLowerCase().includes(searchText);
    });
  }
}
        

import { ExponentialStrengthPipe } from './exponential-strength.pipe';

describe('ExponentialStrengthPipe', () => {
  let pipe: ExponentialStrengthPipe;

  beforeEach(() => {
    pipe = new ExponentialStrengthPipe();
  });

  it('should raise the value to the power of the exponent', () => {
    expect(pipe.transform(2, 3)).toBe(8);
    expect(pipe.transform(3, 2)).toBe(9);
  });

  it('should use exponent 1 as default', () => {
    expect(pipe.transform(2)).toBe(2);
  });
});
        

Modern service with providedIn syntax:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root' // Makes service available app-wide as a singleton
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';
  
  constructor(private http: HttpClient) { }
  
  getData(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(response => response.data),
      catchError(this.handleError)
    );
  }
  
  private handleError(error: any): Observable<never> {
    console.error('An error occurred', error);
    throw error;
  }
}
        

Reactive state management in a service:

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

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  private _users = new BehaviorSubject<User[]>([]);
  private _loading = new BehaviorSubject<boolean>(false);
  
  // Public observables that components can subscribe to
  public readonly users$: Observable<User[]> = this._users.asObservable();
  public readonly loading$: Observable<boolean> = this._loading.asObservable();
  
  constructor(private http: HttpClient) {}
  
  loadUsers(): Observable<User[]> {
    this._loading.next(true);
    
    return this.http.get<User[]>('api/users').pipe(
      tap(users => {
        this._users.next(users);
        this._loading.next(false);
      })
    );
  }
  
  addUser(user: User): Observable<User> {
    return this.http.post<User>('api/users', user).pipe(
      tap(newUser => {
        const currentUsers = this._users.getValue();
        this._users.next([...currentUsers, newUser]);
      })
    );
  }
}

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

Understanding provider types:

// Class provider - most common
{ provide: UserService, useClass: UserService }

// Value provider - for primitive values or objects
{ provide: API_URL, useValue: 'https://api.example.com' }

// Factory provider - when you need to create dynamically
{ 
  provide: ConfigService, 
  useFactory: (http, env) => {
    return env.production 
      ? new ProductionConfigService(http)
      : new DevConfigService(http);
  },
  deps: [HttpClient, EnvironmentService]
}

// Existing provider - alias an existing service
{ provide: LoggerInterface, useExisting: ConsoleLoggerService }
        

Resolution algorithm:

@Component({
  selector: 'app-child',
  template: '<div>{{data}}</div>',
  providers: [
    { provide: DataService, useClass: ChildDataService }
  ]
})
export class ChildComponent {
  constructor(private dataService: DataService) {
    // Angular looks for DataService in:
    // 1. ChildComponent's injector
    // 2. Parent component's injector
    // 3. Up through ancestors
    // 4. Module injector
    // 5. Root injector
  }
}
        

Using InjectionToken for non-class dependencies:

// Define token
export const API_CONFIG = new InjectionToken<ApiConfig>('api.config');

// Provide in module
@NgModule({
  providers: [
    { provide: API_CONFIG, useValue: { apiUrl: 'https://api.example.com', timeout: 3000 } }
  ]
})

// Inject in component or service
constructor(@Inject(API_CONFIG) private apiConfig: ApiConfig) {
  this.baseUrl = apiConfig.apiUrl;
}
        

Multi providers - collecting multiple values under one token:

export const DATA_VALIDATOR = new InjectionToken<Validator[]>('data.validators');

// In different modules or places
providers: [
  { provide: DATA_VALIDATOR, useClass: EmailValidator, multi: true },
  { provide: DATA_VALIDATOR, useClass: RequiredValidator, multi: true }
]

// Get all validators
constructor(@Inject(DATA_VALIDATOR) private validators: Validator[]) {
  // validators is an array containing instances of both validator classes
}
        

Advanced injector modifiers:

import { Component, Self, SkipSelf, Optional } from '@angular/core';

@Component({
  selector: 'app-advanced',
  providers: [{ provide: LogService, useClass: CustomLogService }]
})
export class AdvancedComponent {
  constructor(
    // Only check this component's injector
    @Self() private selfLogger: LogService,
    
    // Skip this component's injector, check ancestors
    @SkipSelf() private parentLogger: LogService,
    
    // Don't throw error if not found
    @Optional() private optionalService?: AnalyticsService
  ) { }
}
        

Advanced Route Configuration:

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    canActivate: [AuthGuard],  // Only authenticated users can access
    children: [
      { path: '', component: ProductListComponent },
      { 
        path: ':id', 
        component: ProductDetailComponent,
        resolve: {
          product: ProductResolver  // Pre-fetch product data
        }
      },
      { 
        path: ':id/edit', 
        component: ProductEditComponent,
        canDeactivate: [UnsavedChangesGuard]  // Prevent accidental navigation
      }
    ]
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),  // Lazy loading
    canLoad: [AdminGuard]  // Only load for authorized admins
  },
  { path: '**', component: NotFoundComponent }  // Wildcard route for 404
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    enableTracing: false,        // Debug mode
    scrollPositionRestoration: 'enabled',  // Restore scroll position
    preloadingStrategy: PreloadAllModules,  // Preload lazy routes after main content
    relativeLinkResolution: 'legacy',
    initialNavigation: 'enabledBlocking'   // Router navigation happens before first content render
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }
        

Listening to Router Events:

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({...})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    // Listen to router events
    this.router.events.pipe(
      filter(event => 
        event instanceof NavigationStart ||
        event instanceof NavigationEnd ||
        event instanceof NavigationError ||
        event instanceof NavigationCancel
      )
    ).subscribe(event => {
      if (event instanceof NavigationStart) {
        // Show loading indicator
        this.loading = true;
      } else {
        // Hide loading indicator
        this.loading = false;
        
        if (event instanceof NavigationError) {
          // Handle error
          console.error('Navigation error:', event.error);
        }
      }
    });
  }
}
        

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules, RouteReuseStrategy } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
import { CustomRouteReuseStrategy } from './core/strategies/custom-route-reuse.strategy';
import { AuthGuard } from './core/guards/auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { title: 'Home Page' } },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule),
    canActivate: [AuthGuard],
    data: { preload: true }
  },
  { 
    path: 'products', 
    loadChildren: () => import('./features/products/products.module').then(m => m.ProductsModule) 
  },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      paramsInheritanceStrategy: 'always',
      relativeLinkResolution: 'corrected',
      initialNavigation: 'enabledBlocking'
    })
  ],
  exports: [RouterModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppRoutingModule { }
        

// features/products/products-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductResolver } from './resolvers/product.resolver';
import { UnsavedChangesGuard } from '../../core/guards/unsaved-changes.guard';

const routes: Routes = [
  {
    path: '',
    component: ProductsComponent,
    children: [
      { path: '', component: ProductListComponent },
      { 
        path: ':id', 
        component: ProductDetailComponent,
        resolve: { product: ProductResolver },
        canDeactivate: [UnsavedChangesGuard]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductsRoutingModule { }
        

// core/components/navbar/navbar.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, OnDestroy {
  isAuthenticated = false;
  currentUrl = '';
  private destroy$ = new Subject();

  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  ngOnInit(): void {
    // Track current route for active link styling
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe((event: NavigationEnd) => {
      this.currentUrl = event.url;
    });

    // Auth state for conditional menu items
    this.authService.authState$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(isAuthenticated => {
      this.isAuthenticated = isAuthenticated;
    });
  }

  logout(): void {
    this.authService.logout();
    this.router.navigate(['/login']);
  }

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

<!-- core/components/navbar/navbar.component.html -->
<nav class="navbar">
  <div class="navbar-brand">
    <a [routerLink]="['/home']">
      <img src="assets/logo.svg" alt="App Logo">
    </a>
  </div>

  <div class="navbar-menu">
    <ul class="nav-links">
      <li>
        <a 
          [routerLink]="['/home']" 
          routerLinkActive="active" 
          [routerLinkActiveOptions]="{exact: true}">
          Home
        </a>
      </li>
      <li>
        <a 
          [routerLink]="['/products']" 
          routerLinkActive="active"
          [routerLinkActiveOptions]="{exact: false}">
          Products
        </a>
      </li>
      <li *ngIf="isAuthenticated">
        <a 
          [routerLink]="['/dashboard']" 
          routerLinkActive="active">
          Dashboard
        </a>
      </li>
    </ul>
  </div>

  <div class="navbar-end">
    <ng-container *ngIf="!isAuthenticated; else loggedIn">
      <button class="btn btn-outline" [routerLink]="['/login']">Login</button>
      <button class="btn btn-primary" [routerLink]="['/register']">Sign Up</button>
    </ng-container>
    
    <ng-template #loggedIn>
      <div class="dropdown" appDropdown>
        <button class="btn btn-profile">
          <img src="assets/avatar.png" alt="Profile">
          <span>My Account</span>
        </button>
        <div class="dropdown-menu">
          <a [routerLink]="['/profile']">Profile</a>
          <a [routerLink]="['/settings']">Settings</a>
          <a (click)="logout()">Logout</a>
        </div>
      </div>
    </ng-template>
  </div>
</nav>
        

<!-- app.component.html -->
<div class="app-container">
  <app-navbar></app-navbar>
  
  <main class="main-content">
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </main>

  <app-footer></app-footer>
</div>

<app-notification-center></app-notification-center>
<app-loading-indicator *ngIf="loading$ | async"></app-loading-indicator>
        

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, share, startWith } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  loading$: Observable;

  constructor(
    private router: Router,
    private titleService: Title
  ) {}

  ngOnInit() {
    // Loading indicator based on router events
    this.loading$ = this.router.events.pipe(
      share(),
      startWith(false),
      filter(event => 
        event instanceof NavigationStart ||
        event instanceof NavigationEnd ||
        event instanceof NavigationCancel ||
        event instanceof NavigationError
      ),
      map(event => event instanceof NavigationStart)
    );

    // Set page title based on route data
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const primaryRoute = this.getChildRoute(this.router.routerState.root);
      const routeTitle = primaryRoute.snapshot.data['title'];
      
      if (routeTitle) {
        this.titleService.setTitle(`${routeTitle} - MyApp`);
      }
    });
  }

  private getChildRoute(route: any) {
    while (route.firstChild) {
      route = route.firstChild;
    }
    return route;
  }
}
        

// Using Router service for programmatic navigation
import { Router } from '@angular/router';

@Component({...})
export class ProductListComponent {
  constructor(private router: Router) {}
  
  viewProductDetails(productId: string): void {
    // Navigate with parameters
    this.router.navigate(['products', productId]);
  }
  
  applyFilters(filters: any): void {
    // Navigate with query parameters
    this.router.navigate(['products'], {
      queryParams: { 
        category: filters.category,
        priceMin: filters.priceRange.min,
        priceMax: filters.priceRange.max,
        sort: filters.sortBy
      },
      queryParamsHandling: 'merge' // Preserve existing query params
    });
  }
  
  checkoutCart(): void {
    // Navigate with extras
    this.router.navigate(['checkout'], {
      state: { cartItems: this.cartService.getItems() },
      skipLocationChange: false,
      replaceUrl: false
    });
  }
}
        

// core/guards/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable | Promise | boolean | UrlTree {
    return this.authService.user$.pipe(
      take(1),
      map(user => {
        const isAuthenticated = !!user;
        
        if (isAuthenticated) {
          return true;
        }
        
        // Redirect to login with return URL
        return this.router.createUrlTree(['login'], { 
          queryParams: { returnUrl: state.url }
        });
      })
    );
  }
}
        

import { Location } from '@angular/common';

@Component({...})
export class ProductDetailComponent {
  constructor(private location: Location) {}
  
  goBack(): void {
    this.location.back();
  }
  
  goForward(): void {
    this.location.forward();
  }
}
        

Advanced CanActivate Example with Role-Based Authorization:

// role.guard.ts
import { Injectable } from '@angular/core';
import { 
  CanActivate, 
  ActivatedRouteSnapshot, 
  RouterStateSnapshot, 
  Router, 
  UrlTree 
} from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}
  
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable | Promise | boolean | UrlTree {
    
    const requiredRoles = route.data.roles as Array;
    
    return this.authService.user$.pipe(
      take(1),
      map(user => {
        // Check if user has required role
        const hasRole = user && requiredRoles.some(role => user.roles.includes(role));
        
        if (hasRole) {
          return true;
        }
        
        // Store attempted URL for redirecting after login
        this.authService.redirectUrl = state.url;
        
        // Navigate to error page or login with appropriate parameters
        return this.router.createUrlTree(['access-denied']);
      })
    );
  }
}
        

CanDeactivate Example with Component Interaction:

// component-can-deactivate.interface.ts
export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean> | Promise<boolean>;
}

// pending-changes.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { ComponentCanDeactivate } from './component-can-deactivate.interface';

@Injectable({
  providedIn: 'root'
})
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(
    component: ComponentCanDeactivate
  ): boolean | Observable<boolean> | Promise<boolean> {
    // Check if the component has a canDeactivate() method
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    return true;
  }
}

// form.component.ts
@Component({...})
export class FormComponent implements ComponentCanDeactivate {
  form: FormGroup;
  
  canDeactivate(): boolean {
    // Check if form is dirty
    if (this.form.dirty) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }
}
        

Main Router Configuration (app-routing.module.ts):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
    canLoad: [AuthGuard] // Optional: prevent unauthorized lazy module loading
  },
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) 
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // Optional: Preload strategies can be configured here
    preloadingStrategy: PreloadAllModules // or custom strategies
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }
        

Feature Module Setup (admin/admin.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { UserManagementComponent } from './user-management.component';

// Feature module's internal routes
const routes: Routes = [
  { 
    path: '', 
    component: AdminComponent,
    children: [
      { path: 'users', component: UserManagementComponent },
      { path: 'reports', component: ReportsComponent }
    ]
  }
];

@NgModule({
  declarations: [
    AdminComponent,
    UserManagementComponent,
    ReportsComponent
  ],
  imports: [
    CommonModule,
    // Note: Using forChild(), not forRoot()
    RouterModule.forChild(routes)
  ]
})
export class AdminModule { }
        

Custom Preloading Strategy Example:

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, load: () => Observable): Observable {
    if (route.data && route.data.preload && route.path) {
      // Add the route path to our preloaded modules array
      this.preloadedModules.push(route.path);
      console.log('Preloaded: ' + route.path);
      return load();
    } else {
      return of(null);
    }
  }
}

// Using in app-routing.module.ts:
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: SelectivePreloadingStrategy
  })],
  exports: [RouterModule]
})

// Marking routes for preloading
const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule),
    data: { preload: true }  // This module will be preloaded
  }
];
        

Template-driven Form Implementation:

// Module import
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  // ...
})
export class AppModule { }

// Component
@Component({...})
export class UserFormComponent {
  user = { name: '', email: '' };
  
  onSubmit() {
    // form handling logic
    console.log(this.user);
  }
}
        

<form #userForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" 
           [(ngModel)]="user.name" 
           #name="ngModel" required>
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
      <div *ngIf="name.errors?.required">Name is required.</div>
    </div>
  </div>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>
        

Reactive Form Implementation:

// Module import
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
  // ...
})
export class AppModule { }

// Component
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

@Component({...})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;
  
  constructor(private fb: FormBuilder) {}
  
  ngOnInit() {
    this.userForm = this.fb.group({
      name: ['', [
        Validators.required, 
        Validators.minLength(3),
        this.customValidator
      ]],
      email: ['', [Validators.required, Validators.email]]
    });
    
    // Subscribe to form value changes
    this.userForm.valueChanges.subscribe(val => {
      console.log('Form value changed:', val);
    });
    
    // Subscribe to specific control changes
    this.userForm.get('name').valueChanges.subscribe(val => {
      console.log('Name changed:', val);
    });
  }
  
  customValidator(control: AbstractControl): {[key: string]: any} | null {
    // Custom validation logic
    return null;
  }
  
  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}
        

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="userForm.get('name').invalid && 
                (userForm.get('name').dirty || userForm.get('name').touched)">
      <div *ngIf="userForm.get('name').errors?.required">
        Name is required.
      </div>
      <div *ngIf="userForm.get('name').errors?.minlength">
        Name must be at least 3 characters long.
      </div>
    </div>
  </div>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>
        

Implementation Details:

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" 
           [(ngModel)]="user.email" 
           #email="ngModel"
           required 
           email 
           [pattern]="emailPattern">
    
    <!-- Validation messages with full error state handling -->
    <div *ngIf="email.invalid && (email.dirty || email.touched)" class="error-messages">
      <div *ngIf="email.errors?.required">Email is required</div>
      <div *ngIf="email.errors?.email">Must be a valid email address</div>
      <div *ngIf="email.errors?.pattern">Email must match the required pattern</div>
    </div>
  </div>
  
  <!-- Form status indicators -->
  <div class="form-status">
    <div>Valid: {{ form.valid }}</div>
    <div>Touched: {{ form.touched }}</div>
    <div>Pristine: {{ form.pristine }}</div>
  </div>
</form>
        

Custom Validator Directive:

import { Directive, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appForbiddenName]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: ForbiddenNameDirective,
    multi: true
  }]
})
export class ForbiddenNameDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string;

  validate(control: AbstractControl): ValidationErrors | null {
    if (!control.value) return null;
    
    const nameRegex = new RegExp(`^${this.forbiddenName}$`, 'i');
    const forbidden = nameRegex.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  }
}
        

Using Custom Validation Directive:

<input type="text" [(ngModel)]="name" name="name" appForbiddenName="admin">
        

Basic Implementation:

import { Component, OnInit } from '@angular/core';
import { 
  FormBuilder, 
  FormGroup, 
  FormControl, 
  Validators, 
  FormArray,
  AbstractControl,
  ValidatorFn
} from '@angular/forms';

@Component({...})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;
  
  // Form states for UI feedback
  formSubmitted = false;
  
  constructor(private fb: FormBuilder) {}
  
  ngOnInit() {
    // Initialize form with validators
    this.userForm = this.fb.group({
      name: [null, [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(50)
      ]],
      email: [null, [
        Validators.required,
        Validators.email,
        Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/)
      ]],
      password: [null, [
        Validators.required,
        Validators.minLength(8),
        this.createPasswordStrengthValidator()
      ]],
      confirmPassword: [null, Validators.required],
      addresses: this.fb.array([
        this.createAddressGroup()
      ])
    }, {
      // Form-level validators
      validators: this.passwordMatchValidator
    });
    
    // Watch for changes to implement conditional validation
    this.userForm.get('email').valueChanges.subscribe(value => {
      // Example: Add domain-specific validation dynamically
      if (value && value.includes('@company.com')) {
        this.userForm.get('name').setValidators([
          Validators.required,
          Validators.minLength(2),
          this.companyEmailValidator()
        ]);
      } else {
        this.userForm.get('name').setValidators([
          Validators.required,
          Validators.minLength(2)
        ]);
      }
      // Important: Update validity after changing validators
      this.userForm.get('name').updateValueAndValidity();
    });
  }
  
  // Helper method to create address FormGroup
  createAddressGroup(): FormGroup {
    return this.fb.group({
      street: [null, Validators.required],
      city: [null, Validators.required],
      zipCode: [null, [
        Validators.required,
        Validators.pattern(/^\\d{5}(-\\d{4})?$/)
      ]]
    });
  }
  
  // Add new address to the form array
  addAddress(): void {
    const addresses = this.userForm.get('addresses') as FormArray;
    addresses.push(this.createAddressGroup());
  }
  
  // Custom validator: password strength
  createPasswordStrengthValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const value = control.value;
      if (!value) return null;
      
      const hasUpperCase = /[A-Z]/.test(value);
      const hasLowerCase = /[a-z]/.test(value);
      const hasNumeric = /[0-9]/.test(value);
      const hasSpecialChar = /[!@#$%^&*()_+\\-=\\[\\]{};':"\\\\|,.<>\\/?]/.test(value);
      
      const passwordValid = hasUpperCase && hasLowerCase && hasNumeric && hasSpecialChar;
      
      return !passwordValid ? { 'passwordStrength': {
        'hasUpperCase': hasUpperCase,
        'hasLowerCase': hasLowerCase,
        'hasNumeric': hasNumeric,
        'hasSpecialChar': hasSpecialChar
      }} : null;
    };
  }
  
  // Form-level validator: password matching
  passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');
    
    if (password && confirmPassword && password.value !== confirmPassword.value) {
      // Set error on the confirmPassword control
      confirmPassword.setErrors({ 'passwordMismatch': true });
      return { 'passwordMismatch': true };
    }
    
    // If confirmPassword has only the passwordMismatch error, clear it
    if (confirmPassword?.errors?.passwordMismatch) {
      // Get any other errors
      const otherErrors = {...confirmPassword.errors};
      delete otherErrors.passwordMismatch;
      
      // Set remaining errors or null if none
      confirmPassword.setErrors(Object.keys(otherErrors).length ? otherErrors : null);
    }
    
    return null;
  }
  
  // Company email validator
  companyEmailValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (!control.value) return null;
      
      // Check if name format meets company requirements
      const isValidCompanyName = /^[A-Z][a-z]+ [A-Z][a-z]+$/.test(control.value);
      return !isValidCompanyName ? { 'companyNameFormat': true } : null;
    };
  }
  
  // Form submission handler
  onSubmit() {
    this.formSubmitted = true;
    
    if (this.userForm.valid) {
      console.log('Form submitted:', this.userForm.value);
      // Process form data...
    } else {
      this.markFormGroupTouched(this.userForm);
    }
  }
  
  // Utility to mark all controls as touched (to trigger validation display)
  markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();
      
      if (control instanceof FormGroup) {
        this.markFormGroupTouched(control);
      } else if (control instanceof FormArray) {
        control.controls.forEach(arrayControl => {
          if (arrayControl instanceof FormGroup) {
            this.markFormGroupTouched(arrayControl);
          } else {
            arrayControl.markAsTouched();
          }
        });
      }
    });
  }
  
  // Convenience getters for template access
  get addresses(): FormArray {
    return this.userForm.get('addresses') as FormArray;
  }
  
  // Utility method for simplified error checking in template
  hasError(controlName: string, errorName: string): boolean {
    const control = this.userForm.get(controlName);
    return control ? control.hasError(errorName) && (control.dirty || control.touched) : false;
  }
}
        

Comprehensive Template for Reactive Form:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="user-form">
  <!-- Name field -->
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name" 
           [ngClass]="{'is-invalid': userForm.get('name').invalid && 
                                     (userForm.get('name').dirty || userForm.get('name').touched)}">
    
    <div class="invalid-feedback" *ngIf="userForm.get('name').errors && 
                                        (userForm.get('name').dirty || userForm.get('name').touched)">
      <div *ngIf="userForm.get('name').errors.required">Name is required</div>
      <div *ngIf="userForm.get('name').errors.minlength">
        Name must be at least {{userForm.get('name').errors.minlength.requiredLength}} characters
      </div>
      <div *ngIf="userForm.get('name').errors.companyNameFormat">
        For company emails, name must be in format "First Last"
      </div>
    </div>
  </div>
  
  <!-- Password field with strength indicator -->
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" formControlName="password">
    
    <div *ngIf="userForm.get('password').invalid && 
                (userForm.get('password').dirty || userForm.get('password').touched)">
      <div *ngIf="userForm.get('password').errors?.required">Password is required</div>
      <div *ngIf="userForm.get('password').errors?.minlength">
        Password must be at least 8 characters
      </div>
      <div *ngIf="userForm.get('password').errors?.passwordStrength">
        Password must contain:
        <ul>
          <li [ngClass]="{'text-success': userForm.get('password').errors.passwordStrength.hasUpperCase}">
            Uppercase letter
          </li>
          <li [ngClass]="{'text-success': userForm.get('password').errors.passwordStrength.hasLowerCase}">
            Lowercase letter
          </li>
          <li [ngClass]="{'text-success': userForm.get('password').errors.passwordStrength.hasNumeric}">
            Number
          </li>
          <li [ngClass]="{'text-success': userForm.get('password').errors.passwordStrength.hasSpecialChar}">
            Special character
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- Dynamic form array example -->
  <div formArrayName="addresses">
    <h4>Addresses</h4>
    
    <div *ngFor="let address of addresses.controls; let i = index" [formGroupName]="i" class="address-group">
      <h5>Address {{i + 1}}</h5>
      
      <div class="form-group">
        <label [for]="'street-' + i">Street</label>
        <input [id]="'street-' + i" type="text" formControlName="street">
        <div *ngIf="address.get('street').invalid && address.get('street').touched">
          Street is required
        </div>
      </div>
      
      <!-- Zip code with pattern validation -->
      <div class="form-group">
        <label [for]="'zip-' + i">Zip Code</label>
        <input [id]="'zip-' + i" type="text" formControlName="zipCode">
        <div *ngIf="address.get('zipCode').invalid && address.get('zipCode').touched">
          <div *ngIf="address.get('zipCode').errors?.required">Zip code is required</div>
          <div *ngIf="address.get('zipCode').errors?.pattern">
            Enter a valid US zip code (e.g., 12345 or 12345-6789)
          </div>
        </div>
      </div>
    </div>
    
    <button type="button" (click)="addAddress()" class="btn btn-secondary">
      Add Another Address
    </button>
  </div>
  
  <!-- Form status -->
  <div class="form-status" *ngIf="formSubmitted && userForm.invalid">
    Please correct the errors above before submitting.
  </div>
  
  <button type="submit" [disabled]="userForm.invalid" class="btn btn-primary mt-3">
    Submit
  </button>
</form>
        

Implementing Async Validators:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, debounceTime, switchMap, first } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserValidationService {
  constructor(private http: HttpClient) {}
  
  // Check if username exists
  checkUsernameExists(username: string): Observable<boolean> {
    return this.http.get<any>(`/api/users/check-username/${username}`).pipe(
      map(response => response.exists),
      catchError(() => of(false))
    );
  }
  
  // Async validator factory
  usernameExistsValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      if (!control.value) {
        return of(null);
      }
      
      return of(control.value).pipe(
        debounceTime(300),  // Wait for typing to stop
        switchMap(username => this.checkUsernameExists(username)),
        map(exists => exists ? { 'usernameExists': true } : null),
        first()  // Complete the observable after first emission
      );
    };
  }
}

// Using async validator in component
@Component({...})
export class RegistrationComponent implements OnInit {
  registerForm: FormGroup;
  
  constructor(
    private fb: FormBuilder,
    private userValidationService: UserValidationService
  ) {}
  
  ngOnInit() {
    this.registerForm = this.fb.group({
      username: ['', {
        validators: [Validators.required, Validators.minLength(4)],
        asyncValidators: [this.userValidationService.usernameExistsValidator()],
        updateOn: 'blur'  // Only validate when field loses focus (for performance)
      }],
      // other form controls...
    });
  }
  
  // Helper to handle pending state
  get usernameIsPending(): boolean {
    return this.registerForm.get('username').pending;
  }
}
        

Template for Async Validation:

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" id="username" formControlName="username">
  
  <!-- Loading indicator during async validation -->
  <div *ngIf="usernameIsPending" class="spinner-border spinner-border-sm"></div>
  
  <div *ngIf="registerForm.get('username').errors && registerForm.get('username').touched">
    <div *ngIf="registerForm.get('username').errors?.required">Username is required</div>
    <div *ngIf="registerForm.get('username').errors?.minlength">
      Username must be at least 4 characters
    </div>
    <div *ngIf="registerForm.get('username').errors?.usernameExists">
      This username is already taken
    </div>
  </div>
</div>
        

Cross-Field Validation Example:

// Date range validator
export function dateRangeValidator(startKey: string, endKey: string): ValidatorFn {
  return (group: AbstractControl): ValidationErrors | null => {
    const start = group.get(startKey)?.value;
    const end = group.get(endKey)?.value;
    
    if (!start || !end) return null;
    
    // Convert to Date objects if they're strings
    const startDate = start instanceof Date ? start : new Date(start);
    const endDate = end instanceof Date ? end : new Date(end);
    
    return startDate > endDate ? { 'dateRange': true } : null;
  };
}

// Using the validator
this.tripForm = this.fb.group({
  departureDate: [null, Validators.required],
  returnDate: [null, Validators.required]
}, {
  validators: dateRangeValidator('departureDate', 'returnDate')
});
        

Dynamic Validation Example:

// Setting up conditional validation
ngOnInit() {
  this.paymentForm = this.fb.group({
    paymentMethod: ['creditCard', Validators.required],
    creditCardNumber: ['', Validators.required],
    creditCardCvv: ['', [
      Validators.required, 
      Validators.pattern(/^\\d{3,4}$/)
    ]],
    bankAccountNumber: [''],
    bankRoutingNumber: ['']
  });
  
  // Subscribe to payment method changes to adjust validation
  this.paymentForm.get('paymentMethod').valueChanges.subscribe(method => {
    if (method === 'creditCard') {
      this.paymentForm.get('creditCardNumber').setValidators([
        Validators.required,
        Validators.pattern(/^\\d{16}$/)
      ]);
      this.paymentForm.get('creditCardCvv').setValidators([
        Validators.required,
        Validators.pattern(/^\\d{3,4}$/)
      ]);
      
      this.paymentForm.get('bankAccountNumber').clearValidators();
      this.paymentForm.get('bankRoutingNumber').clearValidators();
    } 
    else if (method === 'bankTransfer') {
      this.paymentForm.get('bankAccountNumber').setValidators([
        Validators.required,
        Validators.pattern(/^\\d{10,12}$/)
      ]);
      this.paymentForm.get('bankRoutingNumber').setValidators([
        Validators.required,
        Validators.pattern(/^\\d{9}$/)
      ]);
      
      this.paymentForm.get('creditCardNumber').clearValidators();
      this.paymentForm.get('creditCardCvv').clearValidators();
    }
    
    // Update validation status for all controls
    ['creditCardNumber', 'creditCardCvv', 'bankAccountNumber', 'bankRoutingNumber'].forEach(
      controlName => this.paymentForm.get(controlName).updateValueAndValidity()
    );
  });
}
        

Creating a Reusable Error Component:

// validation-message.component.ts
@Component({
  selector: 'app-validation-message',
  template: `
    <div *ngIf="control.invalid && (control.dirty || control.touched || formSubmitted)"
         class="error-message">
      <div *ngIf="control.errors?.required">{{label}} is required</div>
      <div *ngIf="control.errors?.email">Please enter a valid email address</div>
      <div *ngIf="control.errors?.minlength">
        {{label}} must be at least {{control.errors.minlength.requiredLength}} characters
      </div>
      <div *ngIf="control.errors?.pattern">
        {{patternErrorMessage || 'Please enter a valid ' + label}}
      </div>
      <div *ngIf="control.errors?.passwordStrength">
        Password must include uppercase, lowercase, number, and special character
      </div>
      <div *ngIf="control.errors?.usernameExists">This username is already taken</div>
      <!-- Custom error message support -->
      <div *ngFor="let error of customErrors">
        <div *ngIf="control.errors?.[error.key]">{{error.message}}</div>
      </div>
    </div>
  `,
  styles: [`
    .error-message {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }
  `]
})
export class ValidationMessageComponent {
  @Input() control: AbstractControl;
  @Input() label: string;
  @Input() patternErrorMessage: string;
  @Input() formSubmitted = false;
  @Input() customErrors: {key: string, message: string}[] = [];
}
        

Using the Reusable Error Component:

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" id="email" formControlName="email">
  <app-validation-message 
    [control]="registerForm.get('email')" 
    label="Email"
    [formSubmitted]="formSubmitted"
    [customErrors]="[
      {key: 'domainNotAllowed', message: 'This email domain is not supported'}
    ]">
  </app-validation-message>
</div>
        

Testing Custom Validators:

describe('Password Strength Validator', () => {
  const validator = createPasswordStrengthValidator();
  
  it('should validate a strong password', () => {
    const control = new FormControl('Test123!@#');
    const result = validator(control);
    expect(result).toBeNull();
  });
  
  it('should fail for a password without uppercase', () => {
    const control = new FormControl('test123!@#');
    const result = validator(control);
    expect(result?.passwordStrength.hasUpperCase).toBeFalse();
    expect(result?.passwordStrength.hasLowerCase).toBeTrue();
  });
  
  // More test cases...
});

describe('RegistrationComponent', () => {
  let component: RegistrationComponent;
  let fixture: ComponentFixture;
  let userValidationService: jasmine.SpyObj;
  
  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UserValidationService', ['checkUsernameExists']);
    
    await TestBed.configureTestingModule({
      declarations: [RegistrationComponent],
      imports: [ReactiveFormsModule],
      providers: [{ provide: UserValidationService, useValue: spy }]
    }).compileComponents();
    
    userValidationService = TestBed.inject(UserValidationService) as jasmine.SpyObj;
  });
  
  beforeEach(() => {
    fixture = TestBed.createComponent(RegistrationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  
  it('should mark username as taken when service returns true', async () => {
    // Setup service mock
    userValidationService.checkUsernameExists.and.returnValue(of(true));
    
    // Set value and trigger validation
    const control = component.registerForm.get('username');
    control.setValue('existingUser');
    control.markAsDirty();
    
    // Manually trigger async validation (needed in tests)
    const validator = userValidationService.usernameExistsValidator();
    await validator(control).toPromise();
    
    expect(control.hasError('usernameExists')).toBeTrue();
  });
  
  // More test cases...
});
        

Complete TypeScript Service with Error Handling:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry, timeout } from 'rxjs/operators';
import { User } from './models/user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) { }

  // GET request with typed response, params, and headers
  getUsers(page: number = 1, limit: number = 10): Observable {
    const options = {
      params: new HttpParams()
        .set('page', page.toString())
        .set('limit', limit.toString()),
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.getAuthToken()}`,
        'X-API-VERSION': '2.0'
      })
    };

    return this.http.get(this.apiUrl, options).pipe(
      timeout(10000), // Timeout after 10 seconds
      retry(2),       // Retry failed requests up to 2 times
      catchError(this.handleError)
    );
  }

  // POST request with body and options
  createUser(user: User): Observable {
    return this.http.post(this.apiUrl, user, {
      headers: new HttpHeaders({'Content-Type': 'application/json'})
    }).pipe(
      catchError(this.handleError)
    );
  }

  // PUT request
  updateUser(id: number, user: Partial): Observable {
    return this.http.put(`${this.apiUrl}/${id}`, user).pipe(
      catchError(this.handleError)
    );
  }

  // DELETE request
  deleteUser(id: number): Observable {
    return this.http.delete(`${this.apiUrl}/${id}`, {
      observe: 'response' // Full response with status
    }).pipe(
      catchError(this.handleError)
    );
  }

  // Upload file with progress tracking
  uploadUserAvatar(userId: number, file: File): Observable {
    const formData = new FormData();
    formData.append('avatar', file, file.name);

    return this.http.post(`${this.apiUrl}/${userId}/avatar`, formData, {
      reportProgress: true,
      observe: 'events'
    }).pipe(
      catchError(this.handleError)
    );
  }

  // Comprehensive error handler
  private handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    
    if (error.error instanceof ErrorEvent) {
      // Client-side error
      errorMessage = `Client Error: ${error.error.message}`;
    } else {
      // Server-side error
      errorMessage = `Server Error Code: ${error.status}, Message: ${error.message}`;
      
      // Handle specific status codes
      switch (error.status) {
        case 401:
          // Handle unauthorized (e.g., redirect to login)
          console.log('Authentication required');
          break;
        case 403:
          // Handle forbidden
          console.log('You don't have permission');
          break;
        case 404:
          // Handle not found
          console.log('Resource not found');
          break;
        case 500:
          // Handle server errors
          console.log('Server error occurred');
          break;
      }
    }
    
    // Log the error
    console.error(errorMessage);
    
    // Return an observable with a user-facing error message
    return throwError(() => new Error('Something went wrong. Please try again later.'));
  }

  private getAuthToken(): string {
    // Implementation to get the auth token from storage
    return localStorage.getItem('auth_token') || '';
  }
}
        

Authentication Interceptor Example:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const token = this.authService.getToken();
    
    // Only add the token for API requests, skip for CDN requests
    if (token && req.url.includes('api.example.com')) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authReq);
    }
    
    return next.handle(req);
  }
}

// Provider to be added to app.module.ts
export const authInterceptorProvider = {
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true
};
        

Unit Testing with HttpTestingController:

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';
import { User } from './models/user.model';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UserService]
    });
    
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify(); // Verify no outstanding requests
  });

  it('should retrieve users', () => {
    const mockUsers: User[] = [
      { id: 1, name: 'John Doe', email: 'john@example.com' },
      { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
    ];

    service.getUsers().subscribe(users => {
      expect(users.length).toBe(2);
      expect(users).toEqual(mockUsers);
    });

    // Expect a GET request to the specified URL
    const req = httpMock.expectOne('https://api.example.com/users?page=1&limit=10');
    
    // Verify request method
    expect(req.request.method).toBe('GET');
    
    // Provide mock response
    req.flush(mockUsers);
  });

  it('should handle errors', () => {
    service.getUsers().subscribe({
      next: () => fail('should have failed with a 404 error'),
      error: (error) => {
        expect(error.message).toContain('Something went wrong');
      }
    });

    const req = httpMock.expectOne('https://api.example.com/users?page=1&limit=10');
    
    // Respond with mock error
    req.flush('Not Found', { 
      status: 404, 
      statusText: 'Not Found' 
    });
  });
});
        

Optimized Request Pattern with Caching:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, EMPTY } from 'rxjs';
import { tap, catchError, shareReplay, switchMap, retryWhen, delay, take, concatMap } from 'rxjs/operators';
import { User } from './models/user.model';

@Injectable({
  providedIn: 'root'
})
export class OptimizedUserService {
  private apiUrl = 'https://api.example.com/users';
  private cachedUsers$: Observable | null = null;
  private cacheExpiry = 60000; // 1 minute

  constructor(private http: HttpClient) { }

  // Get users with caching
  getUsers(): Observable {
    // Return cached result if available
    if (this.cachedUsers$) {
      return this.cachedUsers$;
    }

    // Create new request with cache
    this.cachedUsers$ = this.http.get(this.apiUrl).pipe(
      retryWhen(errors => 
        errors.pipe(
          // Implement exponential backoff
          concatMap((error, i) => {
            const retryAttempt = i + 1;
            // Maximum of 3 retries with exponential delay
            if (retryAttempt > 3) {
              return throwError(() => error);
            }
            console.log(`Retry attempt ${retryAttempt} after ${retryAttempt * 1000}ms`);
            // Use exponential backoff
            return of(error).pipe(delay(retryAttempt * 1000));
          })
        )
      ),
      // Use shareReplay to cache the response
      shareReplay({
        bufferSize: 1,
        refCount: true,
        windowTime: this.cacheExpiry
      }),
      // Handle error centrally
      catchError(error => {
        this.cachedUsers$ = null; // Clear cache on error
        console.error('Error fetching users', error);
        return throwError(() => error);
      })
    );

    return this.cachedUsers$;
  }

  // Invalidate cache
  clearCache(): void {
    this.cachedUsers$ = null;
  }
}
        

Creating Observables:

import { Observable, of, from, fromEvent, interval, throwError, EMPTY } from 'rxjs';
import { ajax } from 'rxjs/ajax';

// From scratch (full control)
const manual$ = new Observable(subscriber => {
  let count = 0;
  const id = setInterval(() => {
    subscriber.next(count++);
    if (count > 5) {
      subscriber.complete();
      clearInterval(id);
    }
  }, 1000);
  
  // Cleanup function when unsubscribed
  return () => {
    clearInterval(id);
    console.log('Observable cleanup executed');
  };
});

// From values
const values$ = of(1, 2, 3, 4, 5);

// From an array, promise, or iterable
const array$ = from([1, 2, 3, 4, 5]);
const promise$ = from(fetch('https://api.example.com/data'));

// From events
const clicks$ = fromEvent(document, 'click');

// Timer or interval
const timer$ = interval(1000); // Emits 0, 1, 2,... every second

// HTTP requests
const data$ = ajax.getJSON('https://api.example.com/data');

// Empty, error, or never-completing Observables
const empty$ = EMPTY;
const error$ = throwError(() => new Error('Something went wrong'));
        

Subscription Management Patterns:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, interval, Observable } from 'rxjs';
import { takeUntil, takeWhile, filter, take } from 'rxjs/operators';

@Component({
  selector: 'app-subscription-demo',
  template: `
{{counter}}
`
})
export class SubscriptionDemoComponent implements OnInit, OnDestroy {
  counter = 0;
  private destroy$ = new Subject();
  private componentActive = true;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Pattern 1: Manual subscription management
    const subscription1 = interval(1000).subscribe(val => {
      console.log(`Manual management: ${val}`);
    });
    
    // We'll call unsubscribe() in ngOnDestroy
    this.subscriptions.push(subscription1);
    
    // Pattern 2: Using takeUntil with a Subject (recommended)
    interval(1000).pipe(
      takeUntil(this.destroy$)
    ).subscribe(val => {
      this.counter = val;
    });
    
    // Pattern 3: Using takeWhile with a boolean flag
    interval(1000).pipe(
      takeWhile(() => this.componentActive)
    ).subscribe(val => {
      console.log(`takeWhile: ${val}`);
    });
    
    // Pattern 4: Using take(N) for a finite number of emissions
    interval(1000).pipe(
      take(5) // Will automatically complete after 5 emissions
    ).subscribe({
      next: val => console.log(`take(5): ${val}`),
      complete: () => console.log('Completed after 5 emissions')
    });
    
    // Pattern 5: Using async pipe in template (managed by Angular)
    this.counter$ = interval(1000).pipe(
      takeUntil(this.destroy$)
    );
    // In template: {{ counter$ | async }}
  }

  ngOnDestroy() {
    // Pattern 1: Manual cleanup
    this.subscriptions.forEach(sub => sub.unsubscribe());
    
    // Pattern 2: Subject completion
    this.destroy$.next();
    this.destroy$.complete();
    
    // Pattern 3: Boolean flag update
    this.componentActive = false;
  }
}
        

Essential RxJS Operator Categories:

import { of, from, interval, merge, forkJoin, combineLatest, throwError } from 'rxjs';
import {
  map, filter, tap, mergeMap, switchMap, concatMap, exhaustMap,
  debounceTime, throttleTime, distinctUntilChanged,
  catchError, retry, retryWhen, timeout,
  take, takeUntil, takeWhile, skip, first, last,
  startWith, scan, reduce, buffer, bufferTime, bufferCount,
  delay, delayWhen, share, shareReplay, publishReplay, refCount
} from 'rxjs/operators';

// 1. Transformation Operators
const transformed$ = of(1, 2, 3).pipe(
  map(x => x * 10), // Transform each value
  scan((acc, val) => acc + val, 0) // Running total
);

// 2. Filtering Operators
const filtered$ = from([1, 2, 3, 4, 5, 6]).pipe(
  filter(x => x % 2 === 0), // Only even numbers
  take(2), // Take only first 2 values
  distinctUntilChanged() // Remove consecutive duplicates
);

// 3. Combination Operators
const combined$ = combineLatest([
  interval(1000).pipe(map(x => `A${x}`)),
  interval(1500).pipe(map(x => `B${x}`))
]);

// 4. Error Handling Operators
const withErrorHandling$ = throwError(() => new Error('Test Error')).pipe(
  catchError(error => {
    console.error('Caught error:', error);
    return of('Fallback value');
  }),
  retry(3) // Retry up to 3 times before failing
);

// 5. Utility Operators
const withUtilities$ = of(1, 2, 3).pipe(
  tap(x => console.log('Value:', x)), // Side effects without affecting stream
  delay(1000) // Delay each value by 1 second
);

// 6. Multicasting Operators
const shared$ = interval(1000).pipe(
  take(5),
  shareReplay(1) // Cache and share the last value to new subscribers
);
        

Higher-Order Mapping Patterns:

import { of, from, timer, interval } from 'rxjs';
import { mergeMap, switchMap, concatMap, exhaustMap, map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  // Example service methods for comparison
  
  searchUsers(term: string) {
    return this.http.get(`/api/users?q=${term}`);
  }
  
  getUserDetails(userId: number) {
    return this.http.get(`/api/users/${userId}`);
  }
  
  // Pattern 1: mergeMap - Concurrent execution, results in any order
  // Good for: Independent operations where order doesn't matter
  searchAndGetDetailsMerge(term: string) {
    return this.searchUsers(term).pipe(
      mergeMap(users => from(users).pipe(
        mergeMap(user => this.getUserDetails(user.id)),
        // All user detail requests execute concurrently
      ))
    );
  }
  
  // Pattern 2: switchMap - Cancels previous inner Observable when new outer value arrives
  // Good for: Search operations, typeaheads, latest value only matters
  searchWithCancellation(terms$: Observable) {
    return terms$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term => {
        console.log(`Searching for: ${term}`);
        // Previous request is cancelled if new term arrives before completion
        return this.searchUsers(term);
      })
    );
  }
  
  // Pattern 3: concatMap - Sequential execution, preserves order
  // Good for: Operations that must complete in order
  processUsersSequentially(userIds: number[]) {
    return from(userIds).pipe(
      concatMap(id => {
        console.log(`Processing user ${id}`);
        // Each operation waits for previous to complete
        return this.getUserDetails(id);
      })
    );
  }
  
  // Pattern 4: exhaustMap - Ignores new outer values while inner Observable is active
  // Good for: Rate limiting, preventing duplicate submissions
  submitFormWithProtection(formSubmits$: Observable) {
    return formSubmits$.pipe(
      exhaustMap(formData => {
        console.log('Submitting form...');
        // Ignores additional submit events until this one completes
        return this.http.post('api/submit', formData).pipe(
          delay(1000) // Simulating server delay
        );
      })
    );
  }
}
        

Conversion Patterns:

import { from, firstValueFrom, lastValueFrom } from 'rxjs';
import { take } from 'rxjs/operators';

// Promise to Observable
const promise = fetch('https://api.example.com/data');
const observable$ = from(promise);

// Observable to Promise (RxJS 6 and earlier)
const observable$ = of(1, 2, 3);
const legacyPromise = observable$.pipe(take(1)).toPromise();

// Observable to Promise (RxJS 7+)
const modernPromise = firstValueFrom(observable$);  // Gets first value
const finalPromise = lastValueFrom(observable$);    // Gets last value

// Using with async/await
async function getData() {
  try {
    const result = await firstValueFrom(observable$);
    return result;
  } catch (error) {
    console.error('Error getting data', error);
    return null;
  }
}
        

Complete Angular Component Showcasing Observables:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { 
  Observable, Subject, combineLatest, BehaviorSubject, of, throwError
} from 'rxjs';
import { 
  map, filter, debounceTime, distinctUntilChanged, 
  switchMap, catchError, takeUntil, startWith, share
} from 'rxjs/operators';
import { UserService } from './user.service';

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

@Component({
  selector: 'app-user-dashboard',
  template: `
    
User Dashboard
    
    
    

      {{ notification }}
    
    
    
    

      
    
    
    
    
Loading...
    
    
    

      
No users found
      

        {{ user.name }} ({{ user.email }})
        View Details
      
    
    
    
    

      
{{ user.name }}
      
Email: {{ user.email }}
    
    
    
    

      {{ error }}
    
  `
})
export class UserDashboardComponent implements OnInit, OnDestroy {
  // Form control for search input
  searchForm = new FormGroup({
    searchTerm: new FormControl('', Validators.minLength(2))
  });
  
  // Stream sources
  private destroy$ = new Subject();
  private userSelectedSubject = new BehaviorSubject(null);
  private errorSubject = new Subject();
  private loadingSubject = new BehaviorSubject(false);
  
  // Derived streams
  selectedUser$ = this.userSelectedSubject.asObservable();
  error$ = this.errorSubject.asObservable().pipe(
    takeUntil(this.destroy$)
  );
  loading$ = this.loadingSubject.asObservable();
  
  // Primary data stream
  users$: Observable;
  
  // Notification stream with automatic expiration
  notification$: Observable;

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService
  ) {}

  ngOnInit() {
    // Create a stream from the search form control
    const searchTerm$ = this.searchForm.get('searchTerm')!.valueChanges.pipe(
      startWith(''),
      debounceTime(300),
      distinctUntilChanged(),
      takeUntil(this.destroy$)
    );
    
    // Create a stream from URL query parameters
    const queryParams$ = this.route.queryParamMap.pipe(
      map(params => params.get('filter') || ''),
      takeUntil(this.destroy$)
    );
    
    // Combine the form input and URL parameters
    const filter$ = combineLatest([searchTerm$, queryParams$]).pipe(
      map(([term, param]) => {
        const filter = term || param;
        // Update URL with search term
        this.router.navigate([], {
          queryParams: { filter: filter || null },
          queryParamsHandling: 'merge'
        });
        return filter;
      }),
      share() // Share the result with multiple subscribers
    );
    
    // Set up the main data stream
    this.users$ = filter$.pipe(
      switchMap(filter => {
        if (!filter || filter.length < 2) {
          return of([]);
        }
        
        this.loadingSubject.next(true);
        
        return this.userService.searchUsers(filter).pipe(
          catchError(err => {
            console.error('Error searching users', err);
            this.errorSubject.next(
              `Failed to search users: ${err.message}`
            );
            return of([]);
          }),
          finalize(() => this.loadingSubject.next(false))
        );
      }),
      takeUntil(this.destroy$)
    );
    
    // Check URL for initial user ID
    this.route.paramMap.pipe(
      map(params => params.get('id')),
      filter(id => !!id),
      switchMap(id => this.userService.getUserDetails(Number(id))),
      takeUntil(this.destroy$)
    ).subscribe({
      next: user => this.userSelectedSubject.next(user),
      error: err => this.errorSubject.next(`Failed to load user: ${err.message}`)
    });
    
    // Create notification stream with auto-expiration
    this.notification$ = this.userSelectedSubject.pipe(
      filter(user => user !== null),
      switchMap(user => {
        const message = `Selected user: ${user!.name}`;
        
        // Emit message, then null after 3 seconds
        return of(message).pipe(
          concat(timer(3000).pipe(map(() => null)))
        );
      }),
      takeUntil(this.destroy$)
    );
  }
  
  selectUser(user: User) {
    this.userSelectedSubject.next(user);
    this.router.navigate(['user', user.id]);
  }
  
  ngOnDestroy() {
    // Complete all subscriptions
    this.destroy$.next();
    this.destroy$.complete();
    this.userSelectedSubject.complete();
    this.errorSubject.complete();
    this.loadingSubject.complete();
  }
}
        

Feature Modules with Lazy Loading:

// In app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

// In admin.module.ts
@NgModule({
  declarations: [AdminDashboardComponent, AdminUsersComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: AdminDashboardComponent },
      { path: 'users', component: AdminUsersComponent }
    ])
  ],
  providers: [AdminService]
})
export class AdminModule { }
        

Shared Module Pattern:

@NgModule({
  declarations: [
    CommonButtonComponent,
    DataTableComponent,
    LoadingSpinnerComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  exports: [
    CommonButtonComponent,
    DataTableComponent,
    LoadingSpinnerComponent,
    CommonModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SharedService]
    };
  }
}
        

JavaScript Module Implementation:

// Advanced ES module patterns
// Named exports and imports
export const API_URL = 'https://api.example.com';
export function fetchData() { /* ... */ }

// Default export
export default class DataService { /* ... */ }

// Named imports with aliases
import { API_URL as baseUrl, fetchData } from './api';

// Default and named imports together
import DataService, { API_URL } from './data-service';

// Dynamic imports (lazy loading in JS)
async function loadAnalytics() {
  const { trackEvent } = await import('./analytics');
  trackEvent('page_view');
}
        

NgModule Architecture and Patterns:

// Advanced NgModule configuration
@NgModule({
  declarations: [
    UserListComponent,
    UserDetailComponent,
    UserFilterPipe,
    HighlightDirective
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forChild([/* routes */])
  ],
  exports: [
    UserListComponent,
    HighlightDirective
  ],
  providers: [
    UserService,
    { 
      provide: USER_API_TOKEN, 
      useFactory: (config: ConfigService) => config.apiUrl + '/users',
      deps: [ConfigService]
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  entryComponents: [UserModalComponent],  // Deprecated since Angular 9
  schemas: [CUSTOM_ELEMENTS_SCHEMA]       // For non-Angular elements
})
export class UserModule {
  // Module-level lifecycle hooks
  constructor(private injector: Injector) {
    // Module initialization logic
  }
  
  // Static methods for different module configurations
  static forRoot(config: UserModuleConfig): ModuleWithProviders {
    return {
      ngModule: UserModule,
      providers: [
        { provide: USER_CONFIG, useValue: config }
      ]
    };
  }
}
        

Working Together (Code Flow):

// 1. ES module exports a component class
export class FeatureComponent {
  constructor(private service: FeatureService) {}
}

// 2. ES module exports an NgModule that declares the component
@NgModule({
  declarations: [FeatureComponent],
  providers: [FeatureService],
  imports: [CommonModule],
  exports: [FeatureComponent]
})
export class FeatureModule {}

// 3. Another module imports this module via ES module import and NgModule metadata
import { FeatureModule } from './feature/feature.module';

@NgModule({
  imports: [FeatureModule]
})
export class AppModule {}

// 4. Lazy loading combines both systems
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module')
      .then(m => m.FeatureModule)
  }
];