Cool interaction made simple with Angular Material CDK

on YouTube ↗31m

" summary

Live-coding shows Angular Material CDK plus schematics generating a working component from a single command and wiring drag-and-drop ready in under a minute, including containment boundaries and single-axis constraints that all behave correctly. Demo uses the CDK drag-and-drop directives, overlay and focus utilities, and a schematic to scaffold code. Virtual scrolling renders 100,000 items smoothly by only rendering viewport items. Also demonstrates accessibility helpers, platform/breakpoint detection, and component behaviors like stepper/tree/table available separately from Angular Material. Schematics generate working sample components.

AI-written summary · about

" chapters (21)

1. 0:00Intro
2. 1:21Background
3. 2:30Introduction
4. 3:50Back in the day
5. 7:25What is Angular CDK
6. 8:19Background of Angular CDK
7. 9:39Common behavior
8. 10:20About CDK
9. 11:36Drag and Drop
10. 13:41Typing
11. 14:10Schematic
12. 25:10Be fast
13. 25:55breakpoint change
14. 26:05score platform
15. 26:17browser
16. 26:35dynamic component
17. 27:25accessibility
18. 27:42scrolling
19. 28:02performance
20. 29:17component specific behavior
21. 29:50Upcoming features

" related talks

• 23mAngular CDK and Material in 2018Jeremy Elbourn · NGConf 2018
• 29mUnleash the power of the Angular CDKNir Kaufman · ngVikings 2019
• 43mDrag-and-Drop Isn't a Drag with Angular Material CDKAndrew Weins · Windcity DevFest 2019
• 32mAngular Material CDKElad Bezalel · DevFest Ukraine 2018
• 01h 34mBuilding awesome components with the power of the Angular Component Dev KitKristiyan Kostadinov, Elad Bezalel · NGConf 2018
• 28mComposing Accessible UI's With Angular Material ComponentsMichael Prentice · DevFest Florida 2019
• 50mHow to leverage Angular Schematics to empower Devs of Frontend Apps & LibrariesT. Trajan · Voxxed Days Zurich 2019
• 19mCDK Is The Coolest Thing You Are Not UsingJeremy Elbourn · ng-conf 2019