Angular Pro

Overview

Modern Angular (v16+) has reinvented itself: standalone components, signals for fine-grained reactivity, and deferred views — while keeping its enterprise strengths (DI, RxJS, the CLI, strong conventions). Professional Angular means embracing the modern idioms (signals over unnecessary RxJS, standalone over NgModules for new code), structuring by feature with clear boundaries, and using the platform's opinions instead of fighting them.

The through-line: Angular rewards convention — learn its idioms deeply and the framework carries the architecture.

When to use

• Writing or reviewing Angular code (v16+ idioms).
• Structuring Angular apps (standalone components, feature modules, libraries).
• Choosing between signals, RxJS, and async pipe patterns.
• Designing DI, services, and state management.
• Debugging change detection, DI, or RxJS subscription issues.

Core concepts

• Standalone by default. New components/directives/pipes are standalone — no NgModules needed. Compose via imports arrays; use NgModules only for legacy boundaries. Simpler mental model, better tree-shaking, easier lazy loading.
• Signals for local reactivity. signal(), computed(), effect() — fine-grained, no subscription management, automatic dependency tracking. Default choice for component state; effect only for side effects (logging, syncing to external systems), never for deriving state (that's computed).
• RxJS where streams live. HTTP (HttpClient returns Observables), complex event composition (debounce, switchMap, combineLatest), and multicasting. async pipe (or toSignal()) in templates — manual .subscribe() in components is a leak waiting to happen.
• DI as the architecture. Hierarchical injectors, providedIn: 'root' services, injection tokens for config/abstractions. Constructor injection (or inject()); services own logic, components own presentation. Testability falls out naturally.
• Smart/dumb components. Container components (inject services, manage state, handle routing) compose presentational components (@Input() in, @Output() out, OnPush change detection). This split keeps templates testable and change detection cheap.
• Change detection, understood. Default vs OnPush — OnPush components update on input reference changes, events, and async pipe emissions. Immutability (signal.update returning new objects) makes OnPush correct and fast.

Practical workflow

1. Scaffold with the CLI. ng new with standalone, strict TypeScript, and routing; ESLint + Prettier; feature-based folder structure (features/orders/) with clear public APIs per feature.
2. Model state deliberately. Component-local → signals; cross-component → services with signals or RxJS subjects; complex global → NgRx/NGXS only when the app's state interactions justify it (most apps don't need it).
3. Write components presentational-first. Dumb components with typed inputs/outputs and OnPush; containers wire services and routing. Templates declarative; logic in the class testable.
4. Handle HTTP properly. Services wrap HttpClient; interceptors for auth/errors cross-cutting; typed responses; loading/error states in the component via signals or async pipe.
5. Test the pyramid. Jest/Vitest or Karma+Jasmine: unit-test services/pipes/functions; component tests via TestBed for behavior (inputs in → DOM/events out); Playwright/Cypress for critical journeys.
6. Optimize deliberately. OnPush everywhere presentational; defer blocks for below-fold content; route-level lazy loading; trackBy (or @for ... track) for lists; bundle budgets in angular.json enforced in CI.

Idiomatic snippets:

// Signal-based component state; computed derives; effect only for side effects
@Component({ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, ... })
export class OrderListComponent {
  private ordersService = inject(OrdersService);
  filter = signal('');
  orders = this.ordersService.orders; // signal from service
  visible = computed(() =>
    this.orders().filter(o => o.id.includes(this.filter()))
  );
  total = computed(() => this.visible().reduce((s, o) => s + o.total, 0));
}

// RxJS where streams live: typeahead search
results$ = this.term$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.api.search(term)),
  catchError(() => of([]))
);

Common pitfalls

• Manual subscriptions without teardown. .subscribe() in components without takeUntilDestroyed — leaks on every navigation. Async pipe or takeUntilDestroyed() always.
• Signals for everything, RxJS for nothing (or vice versa). Signals for local/synchronous state; RxJS for event streams and composition. Using signals to reimplement debounceTime is as wrong as using Subjects for a counter.
• Effects for derived state. effect(() => this.b.set(transform(this.a()))) — that's computed. Effects are side-effect-only; misuse creates loops and confusion.
• Mutating signal contents. this.list().push(x) mutates without notifying. Use this.list.update(l => [...l, x]) — immutability makes reactivity correct.
• God services / god modules. UtilService with 60 methods, or a shared module importing the world. Services per domain; standalone imports kept minimal and explicit.
• Ignoring OnPush. Default change detection on huge trees is the classic Angular perf bug. OnPush + immutable updates + async pipe is the standard prescription.
• NgModule cargo-culting. Creating modules for new features out of habit. Standalone is the default now — simpler imports, better lazy loading.