Angular (2 → 21)
What it is & where it is used
Angular is Google's full-featured, TypeScript-based framework for building single-page applications. It includes everything out of the box: components, templates, dependency injection, router, forms, HTTP client, testing utilities, build tooling (Angular CLI), server-side rendering and internationalisation.
Key characteristics:
- Component-based — UI built from components (TypeScript class + HTML template + styles).
- TypeScript-first with decorators (
@Component,@Injectable,@Input...). - Dependency injection built in, hierarchical.
- RxJS observables for async streams; Signals (v16+) for fine-grained reactivity.
- Opinionated structure — great for large enterprise teams.
- Standalone components (default since v19) replace NgModules for most apps.
Angular ≠ AngularJS: Angular (2016+) is a complete rewrite of AngularJS (1.x, EOL Dec 2021).
Versions & history
| Version | Date | Highlights |
|---|---|---|
| 2 | Sep 2016 | Rewrite: components, TypeScript, RxJS, DI |
| 4 | Mar 2017 | Skipped v3 (router package was already v3); *ngIf; else, smaller builds |
| 5–8 | 2017–2019 | HttpClient (4.3/5), CLI ng update & Angular Elements (6), CLI prompts (7), differential loading (8) |
| 9 | Feb 2020 | Ivy compiler/renderer by default — smaller bundles, faster builds |
| 12–13 | 2021 | View Engine deprecated then removed; IE11 support dropped (13) |
| 14 | Jun 2022 | Standalone components (preview), strictly typed reactive forms |
| 15 | Nov 2022 | Standalone APIs stable, directive composition, NgOptimizedImage |
| 16 | May 2023 | Signals (preview), takeUntilDestroyed, required inputs, non-destructive hydration |
| 17 | Nov 2023 | Built-in control flow (@if, @for, @switch), deferrable views (@defer), Vite + esbuild dev server/builder, new docs angular.dev |
| 18 | May 2024 | Zoneless change detection (experimental), Material 3, event replay, @let (18.1) |
| 19 | Nov 2024 | Standalone by default, linkedSignal, resource() API, incremental hydration, HMR |
| 20 | May 2025 | Signal APIs stable (effect, linkedSignal, toSignal), zoneless promoted, *ngIf/*ngFor/*ngSwitch deprecated in favour of control flow |
| 21 | Nov 2025 | Zoneless by default for new apps, experimental Signal Forms, Vitest as default test runner, Angular Aria (accessible headless components) |
Release cadence: a major version roughly every 6 months (May and November). Each major gets 6 months active support + 12 months LTS = 18 months. Upgrade with ng update (guide at angular.dev/update-guide).
Lifecycle
Application bootstrap: main.ts → bootstrapApplication(AppComponent, appConfig) (standalone) or platformBrowserDynamic().bootstrapModule(AppModule) (NgModule) → providers registered (router, HttpClient, zoneless/zone.js change detection) → root component rendered into <app-root> → router activates the initial route.
Component lifecycle hooks (in order):
| Hook | When |
|---|---|
constructor | Class instantiated; DI happens (don't do heavy work or touch inputs) |
ngOnChanges(changes) | Before ngOnInit and whenever an @Input reference changes |
ngOnInit | Once, after first ngOnChanges — fetch data, initialise |
ngDoCheck | Every change detection run — custom change detection (use sparingly) |
ngAfterContentInit / ngAfterContentChecked | After projected content (<ng-content>) is initialised / checked |
ngAfterViewInit / ngAfterViewChecked | After the component's view and child views are initialised / checked — @ViewChild available |
ngOnDestroy | Before destroy — unsubscribe, clear timers |
Newer alternatives: afterNextRender / afterEveryRender (DOM work after rendering), DestroyRef + takeUntilDestroyed() for cleanup, signal inputs instead of ngOnChanges.
Change detection lifecycle: an event (click, HTTP response, timer) → with zone.js, Angular detects that async work finished and runs change detection from the root down (all components with Default strategy; OnPush components only if inputs changed, an event fired in them, an async pipe emitted or a signal they read changed) → DOM updated. Zoneless (default for new apps in v21): change detection is scheduled by signals, markForCheck, events and the async pipe — no zone.js.
Tools used to develop
| Tool | Use |
|---|---|
Angular CLI (ng) | new, generate, serve, build, test, update, add |
| VS Code + Angular Language Service | Template IntelliSense and errors |
| Angular DevTools (browser extension) | Component tree, profiler, signals graph |
| RxJS | Observables and operators |
| Angular Material / CDK, PrimeNG, ng-zorro | UI component libraries |
| NgRx (Store, Effects, Signal Store), NGXS, Akita/Elf | State management |
| Vitest / Karma + Jasmine (older), Jest | Unit tests |
| Playwright, Cypress | E2E (Protractor deprecated) |
| Nx | Monorepos and build tooling |
Angular SSR (@angular/ssr) | Server-side rendering, hydration, prerendering |
ESLint (angular-eslint), Prettier | Lint/format |