Introducing the Angular CDK

We will learn about the backbone of the Angular Material library, the Angular CDK, and how we can use it to create custom controls that adhere to Material Design guidelines.

The Angular CDK is the core of the Angular Material library. It is a collection of tools that implement similar interaction patterns; however, they are not tied to any presentation style, such as Material Design. The behavior of Angular Material components has been designed using the Angular CDK. The Angular CDK is so abstract that we can use it to create custom components. You should seriously consider it if you are a UI library author.

The capabilities of the Angular CDK are enormous and certainly cannot fit in a single lesson. For the sake of demonstration, we are going to describe two elements of the library:

• Clipboard: Provides a copy-paste functionality with the system clipboard.

• Drag and drop: Provides drag-and-drop features in elements.

Angular CDK elements are imported from the @angular/cdk npm package. Each element must be imported from its module, which resides in a different namespace, similar to the Angular Material components.

Clipboard

We can easily create a copy-to-clipboard button using the cdkCopyToClipboard directive. All we have to do is import ClipboardModule from the @angular/cdk/clipboard namespace and attach the directive to a button element, such as in the following HTML template: