Building component libraries using the Angular CDK
summary
Concrete checklist: use Angular CDK for portals and overlay positioning so dropdowns avoid overflow, apply the CDK focus-trap for restoring focus on close, and pick a scroll strategy (block, reposition, or close) up front. Build demos in Storybook, run integration tests with Cypress, and make libraries tree-shakable and modular for selective imports. Expect to rewrite one tricky control (select/menu) faster than fighting hacks and to save days on future upgrades.
AI-written summary · about
chapters (24)
- 0:00Intro
- 2:09Brand Identity...
- 2:57Prevent Hackery...
- 5:51This is real code...
- 6:28Make a PR back!
- 7:39Make sure it fits...
- 9:14Browsers?
- 9:46Localization
- 12:00Internationalization
- 13:48Mobile
- 14:43Packaging
- 16:34Testing
- 17:54Documentation
- 21:06That's a lot...
- 22:05Overflow Clipping
- 23:02Positioning & Collision Detection
- 23:34Scroll Strategies
- 24:17Virtual DOM
- 25:35A Angular CDK
- 26:30Multi-platform
- 27:45Portals
- 29:33Overlays
- 30:37Overlay Scrolling
- 31:20Layout
related talks
29mUnleash the power of the Angular CDK
01h 34mBuilding awesome components with the power of the Angular Component Dev Kit
32mAngular Material CDK
26mLearnings from building a component library
23mAngular CDK and Material in 2018
31mCool interaction made simple with Angular Material CDK
25mAngular Material CDK, Datatables and more
19mCDK Is The Coolest Thing You Are Not Using