What is `cdk` in Angular Material 2 components

Question

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?

Ashok Koyi · Accepted Answer · 2017-07-26T09:03:43.637

114

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:

edited Jul 26 '17 at 09:03

answered Feb 21 '17 at 14:38

Ashok Koyi

5,327
8
41
50

I still don't quite understand. Are you saying CDK are going to be Angular components and not part of material? – ctilley79 Jul 03 '17 at 00:48
2

As of now, cdk code lives inside material repo. However, the `material` already started refactoring `cdk` so that cdk components can be pulled & used from npm independent of material. Even after refactoring, cdk code might live alongside material, but the packaging would be different. For eg., new material component such as `table` extends `cdk` table & apply style to them so that the `table`'s theme & size matches material spec. Source: https://github.com/angular/material2/tree/master/src/lib/table – Ashok Koyi Jul 03 '17 at 12:44
1

This article has more details. CDK has components that help with things like text direction and loading spinners, whether or not you are using Material. https://medium.com/@caroso1222/a-first-look-into-the-angular-cdk-67e68807ed9b – Mike_Laird Jul 25 '17 at 22:57
A better source for the samples is going to the demo app of material source. It has demos for almost every usage that you can do with cdk components, including overlayref, portal, portalhost, table, and so on. – Ashok Koyi Jul 26 '17 at 09:01
2

I think it will be good for material2 team to publish short explanation about 'what is CDK' on https://material.angular.io/cdk/ page – happyZZR1400 Dec 07 '17 at 09:39

score 38 · Answer 2 · answered Jul 09 '17 at 09:43

38

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

answered Jul 09 '17 at 09:43

Deepak swain

3,380
1
30
26

1

Thanks! your answer was helpful! – nitinsridar Mar 12 '18 at 16:24

score 5 · Answer 3 · answered Feb 22 '18 at 20:53

5

CDK => Component Development Kit

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

answered Feb 22 '18 at 20:53

Jegan

139
1
8

score 1 · Answer 4 · answered Mar 12 '19 at 04:41

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.

What is `cdk` in Angular Material 2 components

4 Answers4