ConfPad

From uploading files in Dropbox to sorting boards in Trello, drag-and-drop is an increasingly universal part of modern UIs. Despite this, implementing such features in an Angular application has not typically been straightforward. Adding drag-and-drop generally required either handling HTML5 events manually or relying on independent packages that may or may not play nicely with one’s component library of choice. What a drag! Luckily, such pain is now a thing of the past. A highly-anticipated drag-and-drop feature with first-party support was recently added to the Angular Material CDK. Like the rest of the CDK, the drag-and-drop API does not require adoption of Angular Material itself. Rather, it provides UI behavior without enforcing the look-and-feel of the application – the drag-and-drop feature can be readily used in any Angular application alongside other component libraries and styles. The Angular Material CDK provides drag-and-drop capability in the form of easy-to-use components and directives. At its core, the drag-and-drop API allows the user to drag template elements anywhere in the window or between designated drop-sites. Additionally, the drag-and-drop library provides a variety of inputs and events to allow implementing more advanced, custom functionality if needed. In this talk we will explore the features of Angular Material CDK drag-and-drop and build a sample app using its API.