What is `cdk` in Angular Material 2 components

angular-material2 angular-cdk
Ashok Koyi picture Ashok Koyi · Feb 20, 2017 · Viewed 33.8k times · Source

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?

Answer

Ashok Koyi picture Ashok Koyi · Feb 21, 2017

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

Related questions

custom filter in mat-table

I'm using mat-table. It has a filter which works fine with doc example: From https://material.angular.io/components/table/overview, the original code is: <div class="example-header"> <mat-form-field> <input matInput (keyup)="applyFilter($event.target.…

Read More
Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

I am new to material 2 and I have implemented mat table and in which I have click event on row to open dialog and there is also a menu button in last column "Action" but on clicking on button it …

Read More
Angular Material Table Error: Can't bind to 'mdHeaderRowDef' since it isn't a known property of 'md-header-row'

I'm trying to convert a CDK data-table to a Material Design styled data-table (see: https://material.angular.io/components/table/overview), but when I change the cdk prefixes to md, I get the following error... Uncaught Error: Template parse errors: …

Read More