Drag-and-Drop Isn't a Drag with Angular Material CDK
summary
Demo shows Angular Material CDK drag-and-drop added around v7 with declarative directives that avoid low-level HTML5 event handling, supporting free drag, list reordering and moving between lists, touch, CSS preview and placeholder, animated drops, predicate filtering, and a drop-list-group to connect sites. A GitHub playground and a working calendar app with Clarity are built and function, using CDK helpers moveItemInArray and transferArrayItem. No built-in keyboard drag support is provided.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:16Agenda
- 1:32What is Angular
- 3:22Angular Material
- 4:42Component Development Kit
- 6:43Drag and Drop Features
- 9:04First Party Support
- 15:33Playground App
- 20:12Drag and Drop
- 21:23Functions
- 22:45Events
- 25:00Calendar
- 26:13Source code
- 27:10Styling the calendar
- 28:47Data array
- 29:36Click event
- 31:06Drop event
- 32:36Draggable items
- 34:20Other libraries
- 35:39State
- 36:45FormGroup
- 40:26Empty Strings
