Every "top Angular Material features" post lists the same six things: buttons, cards, datepicker, data table, theming, animations. Cool, we've all seen it. But Angular's still pulling around 3.8M weekly npm downloads in 2026, and Angular Material has shipped a ton of stuff in the CDK and tooling layer that quietly saves weeks of custom work. Here's what I keep reaching for that almost nobody mentions.
1. Component Test Harnesses
If you're still writing By.css('.mat-button') selectors in tests, stop. MatButtonHarness, MatTableHarness, MatDialogHarness — the whole @angular/cdk/testing package gives you an API that talks to components the way a user does. Same harness runs in unit and e2e. Refactor the DOM, your tests don't break. I've seen test suites cut nearly in half after teams migrated.
2. CDK BreakpointObserver
CSS media queries are great until your logic needs to know the viewport, not just your styling. BreakpointObserver gives you an Observable you can subscribe to with built-in tokens like Breakpoints.Handset and Breakpoints.Web. Beats hand-rolling @HostListener('window:resize') and forgetting to debounce it.
3. The CDK a11y module is criminally underused
cdkTrapFocus traps tab focus inside a modal. LiveAnnouncer pushes screen-reader announcements without manual ARIA wiring. FocusMonitor tells you whether focus arrived via keyboard, mouse, or touch. cdk-visually-hidden for screen-reader-only labels. Most custom modals I audit fail WCAG because focus escapes the dialog the second you tab once. If your team is shipping enterprise Angular Material apps and isn't on top of this, it's the kind of work where it pays to hire Angular developer who's actually shipped a11y-compliant work before. Finding out at audit time is the expensive way.
4. CDK Overlay + Portal
The engine behind every Material dialog, menu, and tooltip. Connected positioning, scroll strategies, backdrop, and focus restoration are all in the box. Custom autocomplete, context menu, image lightbox? You don't need a third-party lib. Overlay.create() plus ComponentPortal. Took me way too long to realize this.
5. Angular Material's M3 tokens and density system
The theming model changed and a lot of people missed it. Stable since Angular 18. CSS custom properties instead of recompiling Sass for every theme tweak. Density tokens let you globally scale component padding with one variable, which is huge for dense admin tables. Most teams are still fighting ::ng-deep overrides. Don't.
Look, most of this is in the docs. The docs are just massive and this stuff doesn't live on the Angular Material front page. If you've been shipping Material apps for years and never touched the CDK side, you're leaving a lot on the table. The library's closer to a behavior toolkit than a UI kit once you go past the components, and that's the part nobody actually talks about.
This article was originally published by DEV Community and written by devansh.
Read original article on DEV Community