img

The Angular Component Developer Kit is an open-source project born from the creation of the Angular Material 2 component library. It encompasses all the low-level utilities thats needed to build quality components.

What is it?

As the material team was building Material components for Angular, they identified a set of patterns and low-level utilities they were using over and over again. They recognized these are low-level utilities that everyone could benefit from.

You might say, why do I care about the CDK if I'm using Material? Well, what if you needed a special component that was unique to your use-case and you needed to build a component. These utilities would empower you to create the same type of quality components that the Material components are built on.

The second scenario they are useful is what if your product has a unique style that doesn't fit in the Material design pattern and you needed to author your own components? These utilities would help get a jump start on that too!

What's inside?

a11y

The a11y package is a set of accessibility utilities that helps with:

  • Screen-reader descriptors/announcers
  • Manage tab focus
  • Manage interactivity of an element for capturing disabled/tappable/focusable.

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

bidi

The bidi package is a set of internationalization utilities that help you get the LTR or RTL direction for component authoring.

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

coercion

The coercion package helps you coerce Angular @Input() to specific types. For example, if I were to do:

<my-comp active="false"></my-comp>  

The active property will be read in as a string. This isn't a huge deal because typically you might use the binding handles instead like:

<my-comp [active]="false"></my-comp>  

which would parse it correctly. This package helps you manage the first case for the following types:

  • Arrays
  • Booleans
  • Numbers

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

collections

The collections package is a collection manager for consuming and selecting datasets. It handles things like:

  • Toggle
  • Select
  • Deselect
  • Sort
  • Clear

This component is used internally for components like that data-table where you are managing connecting to a datasource and managing its contents.

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

layout

The layout package is a set of utilities for building responsive layouts. It contains utilities such as screen breakpoint observables and media matchers.

With this utility you can subscribe to observables and change the component entirely based on the breakpoint like so:

@Component({ ... })
export class MyWidget {  
  isHandset: Observable<BreakpointState>;

  constructor(bm: BreakpointObserver) {
    bm.observe(Handset).subscribe((state: BreakpointState) => {
      if (state.matches) {
        this.makeEverythingFitOnSmallScreen();
      } else {
        this.expandEverythingToFillTheScreen();
      }
    });
  }
}

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

observers

The observers package is a package that wraps the browser's MutationObserver in a directive. The MutationObserver is a DOM-level API that allows you to watch for document changes on an element's tree.

This directive is useful for situations where you might be async-loading data in and need parent views to adjust once content is loaded.

<my-component (cdkObserveContent)="projectContentChanged()">  
  <async-component></async-component>
</my-component>  

The cdkObserveContent directive would allow me to react to changes in the DOM tree that the async component might be making after we have loaded.

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

overlay

The overlay is a package that manages opening floating panels on the screen. It handles things like:

  • Position strategy - Determination of how the overlay will be positioned on the screen and its relativity to a parent element.
  • Scroll strategy - Determination of how the overlay will react to scrolling; such as: whether to close on scroll, block scrolling or reposition on scroll.
  • Backdrop - Handles setting a blocking backdrop or not.

This component is used extensively throughout the Material framework for opening and positioning things that open up on the screen.

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

portal

The portal is a package that handles dynamically injecting either a Component or a TemplateRef into a slot on the page.

For example, if you need to show a tooltip you typically want that anchored to the body of the page so that any overflow constraints can be avoided. This portal service will help you handle dynamically creating that component and injecting it into the container slot.

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

and more...

There are many more utilities nestled inside the CDK folder in Material2 project. The few listed here are some of the ones I've found particularly useful.

Whats next?

The CDK is in its early days, it was just broken out in the past few versions ago from the Material library. Currently its at beta11 (coinciding with Materials version). Its still very new so I'd watch this one carefully!

© 2017. All Rights Reserved.