Angular Components, Modules & Services: Production Patterns That Scale

// io.thecodeforge — JavaScript tutorial

import {
  Component,
  Input,
  Output,
  EventEmitter,
  ChangeDetectionStrategy,
  OnInit
} from '@angular/core';
import { OrderService } from '../services/order.service';
import { Order, OrderStatus } from '../models/order.model';

// OnPush tells Angular: only re-render this component when its @Input
// references change, or when an event originates inside it.
// For a component that only renders passed-in data, this is always correct.
@Component({
  selector: 'app-order-summary',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="order-card" [class.order-card--urgent]="isUrgent">
      <h3>Order #{{ order.id }}</h3>
      <p>{{ order.customerName }} — {{ order.totalAmount | currency }}</p>
      <p class="status" [attr.data-status]="order.status">
        {{ order.status }}
      </p>
      <!-- Emit intent upward — never mutate the input directly.
           Mutating @Input directly breaks OnPush and causes
           change detection bugs that are extremely hard to trace. -->
      <button
        *ngIf="order.status === OrderStatus.PENDING"
        (click)="confirmOrder()"
      >
        Confirm
      </button>
    </div>
  `
})
export class OrderSummaryComponent implements OnInit {
  // Readonly alias so the template can reference the enum without
  // importing it separately in the template context.
  readonly OrderStatus = OrderStatus;

  // @Input signals that parent components control this data.
  // This component is a pure renderer — it doesn't fetch anything.
  @Input() order!: Order;

  // @Output carries user intent back to the parent.
  // The parent decides what confirmation actually means —
  // maybe it calls an API, maybe it updates local state first.
  @Output() orderConfirmed = new EventEmitter<string>();

  // isUrgent is derived state, computed once on init from the input.
  // Not fetched. Not stored in a service. Pure derivation.
  isUrgent = false;

  constructor(private readonly orderService: OrderService) {}

  ngOnInit(): void {
    // Compute derived display logic from the input data.
    // OrderService here provides formatting/validation logic,
    // not a new HTTP call — the parent already fetched the order.
    this.isUrgent = this.orderService.isOrderUrgent(this.order);
  }

  confirmOrder(): void {
    // Component emits the intent. Parent handles the side effect.
    // This keeps the component unit-testable with zero HTTP mocking.
    this.orderConfirmed.emit(this.order.id);
  }
}

// io.thecodeforge — JavaScript tutorial

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { OrdersPageComponent } from './orders-page/orders-page.component';
import { OrderSummaryComponent } from './order-summary/order-summary.component';
import { OrderFilterComponent } from './order-filter/order-filter.component';
import { OrderService } from './services/order.service';

// Define routes at the feature level, not in the root router.
// This is the contract the AppRoutingModule imports lazily.
const ORDERS_ROUTES: Routes = [
  {
    path: '',
    component: OrdersPageComponent
  },
  {
    // Lazy-load order detail only when the user navigates to it.
    // This route never appears in the main bundle.
    path: ':orderId/detail',
    loadChildren: () =>
      import('./order-detail/order-detail.module').then(
        (m) => m.OrderDetailModule
      )
  }
];

@NgModule({
  declarations: [
    // These components exist ONLY in this module's template compiler.
    // They cannot be used in other modules unless exported.
    OrdersPageComponent,
    OrderSummaryComponent,
    OrderFilterComponent
  ],
  imports: [
    // CommonModule provides *ngIf, *ngFor, async pipe.
    // Don't import BrowserModule here — that's root-only.
    // BrowserModule in a feature module throws a runtime error
    // about duplicate providers for BrowserModule.
    CommonModule,

    // Only import ReactiveFormsModule if this module actually
    // uses reactive forms. Every import adds to the chunk size.
    ReactiveFormsModule,

    RouterModule.forChild(ORDERS_ROUTES)
    // forChild, NOT forRoot. forRoot registers the router service.
    // Calling forRoot in a lazy module creates a second Router
    // instance, which silently breaks navigation — one of the
    // hardest bugs to diagnose in an Angular app.
  ],
  // Export only what other modules need to consume.
  // OrderFilterComponent is internal — don't export it.
  exports: [OrderSummaryComponent],
  providers: [
    // Providing OrderService here scopes it to this lazy module.
    // A new instance is created when the module loads.
    // If you need a single app-wide instance, use providedIn: 'root'
    // in the service itself instead of listing it here.
    // Listing it here AND using providedIn: 'root' means the
    // module-level provider wins for components in this module —
    // a second instance gets created and your singleton is broken.
    OrderService
  ]
})
export class OrdersModule {}

// io.thecodeforge — JavaScript tutorial

import { Injectable, OnDestroy } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {
  BehaviorSubject,
  Observable,
  Subject,
  timer
} from 'rxjs';
import {
  switchMap,
  catchError,
  takeUntil,
  tap,
  retry,
  distinctUntilChanged
} from 'rxjs/operators';
import { Order, OrderStatus } from '../models/order.model';
import { environment } from '../../environments/environment';

export interface OrderPollState {
  orders: Order[];
  lastUpdated: Date | null;
  error: string | null;
  isLoading: boolean;
}

const INITIAL_STATE: OrderPollState = {
  orders: [],
  lastUpdated: null,
  error: null,
  isLoading: false
};

// providedIn: 'root' means ONE instance for the entire app lifetime.
// Angular's DI creates it lazily on first injection and tree-shakes it
// if nothing injects it — unlike listing it in a module's providers array.
@Injectable({ providedIn: 'root' })
export class OrderPollingService implements OnDestroy {
  // BehaviorSubject holds the current state and replays it to
  // late subscribers — components that mount after the first poll
  // get the current value immediately, not a blank slate.
  private readonly stateSubject = new BehaviorSubject<OrderPollState>(INITIAL_STATE);

  // Exposed as Observable so consumers can't call .next() from outside.
  // This is the single source of truth for order state in the app.
  readonly state$: Observable<OrderPollState> = this.stateSubject.asObservable();

  // destroy$ is the standard Angular pattern for unsubscribing.
  // When takeUntil(this.destroy$) fires, all polling subscriptions clean up.
  private readonly destroy$ = new Subject<void>();

  private readonly POLL_INTERVAL_MS = 15_000;
  private readonly MAX_RETRIES = 3;
  private isPolling = false;

  constructor(private readonly http: HttpClient) {}

  startPolling(statusFilter: OrderStatus): void {
    // Guard against starting multiple polling streams.
    // Without this, every call to startPolling creates a new interval
    // and you end up with N parallel HTTP requests firing simultaneously.
    if (this.isPolling) return;
    this.isPolling = true;

    timer(0, this.POLL_INTERVAL_MS)
      .pipe(
        // switchMap cancels the previous HTTP request if the timer fires
        // before the last request completed. Without switchMap here,
        // slow responses cause overlapping requests and race conditions.
        switchMap(() => {
          this.patchState({ isLoading: true, error: null });
          return this.http
            .get<Order[]>(
              `${environment.apiBase}/orders?status=${statusFilter}`
            )
            .pipe(
              // Retry up to 3 times on failure before surfacing the error.
              // Use retry({ count, delay }) in RxJS 7+ for exponential backoff.
              retry(this.MAX_RETRIES),
              catchError((err: HttpErrorResponse) => {
                this.patchState({
                  isLoading: false,
                  error: `Order fetch failed: ${err.status} ${err.statusText}`
                });
                // Return current orders so the UI doesn't blank out on error.
                return [this.stateSubject.getValue().orders];
              })
            );
        }),
        tap((orders: Order[]) => {
          this.patchState({
            orders,
            isLoading: false,
            lastUpdated: new Date(),
            error: null
          });
        }),
        // Only emit downstream if the order list actually changed.
        // Prevents unnecessary re-renders when nothing has changed.
        distinctUntilChanged(
          (prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)
        ),
        // When destroy$ fires (service destroyed), the interval stops
        // and the HTTP request is cancelled. No lingering subscriptions.
        takeUntil(this.destroy$)
      )
      .subscribe();
  }

  stopPolling(): void {
    this.isPolling = false;
    this.destroy$.next();
  }

  // Shallow merge patch — doesn't replace the whole state object,
  // so partial updates don't wipe fields callers aren't touching.
  private patchState(partial: Partial<OrderPollState>): void {
    this.stateSubject.next({
      ...this.stateSubject.getValue(),
      ...partial
    });
  }

  ngOnDestroy(): void {
    // Root-provided services live as long as the app, so ngOnDestroy
    // fires only on app teardown. But component-scoped services use
    // this to clean up when their host component is destroyed.
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// io.thecodeforge — JavaScript tutorial

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy
} from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { OrderPollingService, OrderPollState } from '../services/order-polling.service';
import { OrderService } from '../services/order.service';
import { Order, OrderStatus } from '../models/order.model';

// This is the SMART (container) component.
// It knows about services. It does NOT own template complexity.
// Its template delegates all rendering to dumb components.
@Component({
  selector: 'app-orders-dashboard',
  // OnPush works here because all data comes through the async pipe —
  // Angular's async pipe marks the view dirty when the observable emits,
  // even under OnPush, without you doing anything extra.
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ng-container *ngIf="orderState$ | async as state">
      <!-- Pass the loading flag down — no service knowledge in child -->
      <app-loading-bar *ngIf="state.isLoading"></app-loading-bar>

      <app-order-error-banner
        *ngIf="state.error"
        [message]="state.error"
      ></app-order-error-banner>

      <p *ngIf="state.lastUpdated" class="refresh-time">
        Last updated: {{ state.lastUpdated | date:'HH:mm:ss' }}
      </p>

      <!-- Loop over orders, pass each to the dumb summary component.
           The parent handles confirmOrder — the child just emits intent. -->
      <app-order-summary
        *ngFor="let order of state.orders; trackBy: trackByOrderId"
        [order]="order"
        (orderConfirmed)="handleOrderConfirmed($event)"
      ></app-order-summary>

      <p *ngIf="!state.isLoading && state.orders.length === 0">
        No pending orders.
      </p>
    </ng-container>
  `
})
export class OrdersDashboardContainerComponent implements OnInit, OnDestroy {
  // Expose the entire state stream to the template.
  // The async pipe handles subscribe/unsubscribe.
  // No local order[] variable. No ngOnDestroy subscription cleanup needed here.
  orderState$!: Observable<OrderPollState>;

  constructor(
    private readonly pollingService: OrderPollingService,
    private readonly orderService: OrderService
  ) {}

  ngOnInit(): void {
    this.orderState$ = this.pollingService.state$;
    // Start polling only when this container is alive.
    this.pollingService.startPolling(OrderStatus.PENDING);
  }

  // trackBy prevents Angular from destroying and recreating DOM nodes
  // on every poll cycle. Without this, every 15s every order card
  // unmounts and remounts — animations reset, focus is lost.
  trackByOrderId(_index: number, order: Order): string {
    return order.id;
  }

  handleOrderConfirmed(orderId: string): void {
    // The container owns the side effect. The child just emitted intent.
    this.orderService.confirmOrder(orderId).subscribe({
      next: () => {
        // On success, the polling interval will pick up the status change.
        // No manual state mutation needed — the server is the source of truth.
        console.info(`Order ${orderId} confirmed successfully.`);
      },
      error: (err) => {
        console.error(`Failed to confirm order ${orderId}:`, err);
        // In production: dispatch to an error notification service here.
      }
    });
  }

  ngOnDestroy(): void {
    // Stop polling when the user navigates away from the dashboard.
    // Without this, polling continues in the background forever.
    this.pollingService.stopPolling();
  }
}