Angular CDK

The Angular Component Dev Kit (CDK) is the behavior layer underneath Angular Material, published as a standalone package so any Angular app can build its own custom components on the same primitives Google’s Material team uses. Rather than shipping styled widgets, it ships composable, unstyled building blocks — overlay positioning, drag-and-drop, focus trapping, live-region announcements, virtual scrolling, and a text-field autosize directive — each as its own entry point you import only where you need it.

A distinguishing feature is the CDK’s component test harness system: a ComponentHarness API that lets you write tests against a component’s public behavior once and run them unchanged under TestBed, Protractor, or Selenium WebDriver, so tests survive internal DOM refactors. Combined with first-class accessibility services (LiveAnnouncer, InteractivityChecker, high-contrast-mode detection) that are usable independent of any specific component, the CDK functions less like a widget library and more like an accessibility- and interaction-pattern toolkit for the whole Angular ecosystem.

What You Get

• An overlay engine (OverlayRef, OverlayPositionBuilder) for building popups, tooltips, dropdowns, and dialogs with flexible connected/global positioning and scroll strategies
• A drag-and-drop module (CdkDrag, CdkDropList) with sorting, boundary constraints, and free-drag support, usable without any other CDK or Material component
• Accessibility services — FocusTrap, FocusMonitor, LiveAnnouncer, InteractivityChecker, and high-contrast-mode detection — that work as standalone injectable services
• A virtual scrolling viewport (CdkVirtualScrollViewport) for rendering large lists efficiently by only mounting visible items
• A component test harness framework (ComponentHarness) that decouples tests from DOM structure and runs identically across TestBed, Protractor, and Selenium WebDriver
• Low-level utilities for bidirectional text (Directionality), platform detection, keycodes, and coercion helpers used throughout the Angular ecosystem

Common Use Cases

• Building a custom dropdown, tooltip, or modal dialog with precise positioning without adopting Material’s visual design
• Adding accessible drag-and-drop reordering to a list, kanban board, or file uploader
• Rendering a virtualized table or list with thousands of rows without a perceptible scroll-jank penalty
• Writing component tests that assert on behavior (open/close, selected value) rather than brittle CSS selectors, portable across test runners
• Implementing WAI-ARIA-compliant focus management and screen-reader announcements in a fully custom design system

Under The Hood

Architecture The CDK is organized as roughly twenty independent entry-point modules under src/cdk/ (a11y, overlay, drag-drop, portal, scrolling, table, tree, listbox, menu, dialog, stepper, layout, observers, platform, testing, bidi, clipboard, coercion, collections, config, keycodes, text-field), each with its own public-api.ts boundary and NgModule, so consumers pull in only the primitives they need rather than the whole package. The overlay subsystem (overlay.ts, overlay-ref.ts, position/overlay-position-builder.ts, keyboard/outside-click dispatchers) is the clearest example of layered design: a factory function resolves dependencies via Angular’s injector, delegates rendering to a swappable OverlayContainer, and exposes a OverlayRef handle that owns its own lifecycle independent of the component that created it. The testing harness layer (harness-environment.ts plus protractor/, selenium-webdriver/, and testbed/ adapters) inverts the usual test-framework relationship by defining a single environment-agnostic contract that each runner implements, which is what lets the same harness-based test execute unchanged in unit and e2e contexts.

Tech Stack Written almost entirely in TypeScript (roughly four-fifths of the codebase) against Angular’s own APIs (@angular/core, @angular/common, @angular/forms, @angular/platform-browser as peer dependencies, versioned via the monorepo’s pnpm catalog), with SCSS powering the handful of prebuilt style sheets (overlay, a11y, text-field) that ship as opt-in CSS. The monorepo is built with Bazel (BUILD.bazel files throughout, MODULE.bazel for the newer bzlmod setup) alongside a pnpm workspace, with ts-node-driven scripts orchestrating package builds, API-golden checks, and circular-dependency verification outside of Bazel itself. Runtime dependencies are deliberately minimal — tslib and parse5 — keeping the CDK lightweight relative to the tooling used to build it.

Code Quality Testing relies on Jasmine and Karma, with spec files colocated next to their implementation (roughly one spec file for every five source files, concentrated in the more behaviorally complex modules like overlay, drag-drop, and a11y) and exercised across a wide CI surface — dedicated GitHub Actions workflows for standard CI, scheduled CI, and internal Google test suites, plus separate linting via tslint, stylelint, and a Prettier-based formatter invoked through the team’s own ng-dev CLI. Every source file carries a license header and the public surface is guarded by an API-golden-file check (approve-api-golden.mts) that fails CI on unreviewed public API changes, reflecting the discipline expected of a library embedded in Angular’s own release train.

What Makes It Unique The CDK’s defining idea is separating interaction-pattern behavior from presentation entirely — most UI libraries bundle both, but the CDK ships only the former (positioning math, focus management, drag physics, virtualization) as framework-integrated primitives, letting Angular Material be just one opinionated skin on top of it. Its test harness architecture is a genuine point of differentiation among component libraries: rather than one test API per test runner, a single harness definition per component runs unchanged across unit tests (TestBed) and end-to-end tests (Protractor, Selenium WebDriver), which most comparable UI toolkits do not offer.