What is `cdk` in Angular Material 2 components

Angular Material2Angular Cdk

Angular Material2 Problem Overview


In multiple places within angular material source, there are elements/ css classes that have cdk as their prefix.

Does anyone know what the abbreviation for cdk in angular material context?

Angular Material2 Solutions


Solution 1 - Angular Material2

CDK is the short form of component dev kit. This signifies that these are general-purpose tools for building components that are not coupled to Material Design

From the material2 changelog

  • Several components in core/, such as Overlay, have had their prefix changed to cdk- (short for "component dev kit"). This signifies that these are general-purpose tools for building components that are not coupled to Material Design.The old selectors are still available as deprecated but will be removed in the next release. The CSS classes have been changed.

For more info on how to use cdk components such as table, overlay, portal, portal host, e.t.c, you can find examples here:

  1. https://github.com/angular/material2/tree/master/src/demo-app
  2. https://medium.com/@caroso1222/a-first-look-into-the-angular-cdk-67e68807ed9b

Solution 2 - Angular Material2

CDK (Component Development Kit) is a standalone package.

The goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language.

Checkout the repo from Google for CDK

https://github.com/angular/material2/tree/master/src/cdk

Solution 3 - Angular Material2

CDK => Component Development Kit

It's main purpose is to enable extensible so as to create custom components on top of it.

Solution 4 - Angular Material2

Stands for Component Dev Kit. The CDK allows you to use features that do not depend on Angular Material and its styling and is fully independent. Some awesome features that you can use are Drag and Drop and Virtual scrolling (which I love personally) by just importing the cdk. Check the documentation out here.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAshok KoyiView Question on Stackoverflow
Solution 1 - Angular Material2Ashok KoyiView Answer on Stackoverflow
Solution 2 - Angular Material2Deepak swainView Answer on Stackoverflow
Solution 3 - Angular Material2JeganView Answer on Stackoverflow
Solution 4 - Angular Material2Dilshan LiyanageView Answer on Stackoverflow