Exploring The Undocumented APIs Of Material CDK

A service for determining the current platform.

@Component({
  ...
})
export class AppComponent  {
  constructor( private _platform: Platform ) {
  }
ngOnInit() {
 console.log(this._platform.ANDROID);
 console.log(this._platform.BLINK);
console.log(this._platform.EDGE);
console.log(this._platform.FIREFOX);
console.log(this._platform.IOS);
console.log(this._platform.isBrowser);
console.log(this._platform.SAFARI);
console.log(this._platform.TRIDENT);
console.log(this._platform.WEBKIT);
}
}

Extras

supportsPassiveEventListeners() — Checks whether the user’s browser supports passive event listeners.

getSupportedInputTypes() — The input types supported by this browser.

import { getSupportedInputTypes, supportsPassiveEventListeners } from '@angular/cdk/platform';
@Component({
...
})
export class CdkApiComponent implements OnInit {
constructor() {
console.log(supportsPassiveEventListeners());
console.log(getSupportedInputTypes());
}
}

A utility for getting the bounds of the browser viewport.

import { ViewportRuler } from '@angular/cdk/scrolling';
@Component({
...
})
export class CdkApiComponent implements OnInit {
constructor( private _ruler: ViewportRuler ) {}
ngOnInit() {
// { width, height }
console.log(this._ruler.getViewportSize());
 // { bottom, height, left, right, top, width }
console.log(this._ruler.getViewportRect());
<font color="#9c9c94">// { top, left }</font>
<font color="#0000ff">console.log</font>(<font color="#0000ff">this</font>._ruler.<font color="#9c00ff">getViewportScrollPosition</font>());

<font color="#9c9c94">// native resize event object</font>

 this._ruler.change().subscribe(resizeEvent => console.log(resizeEvent));
}
}

KeyCodes

Commonly used key code constants.

import {
 UP_ARROW,
 DOWN_ARROW,
 RIGHT_ARROW,
 LEFT_ARROW,
 PAGE_UP,
 PAGE_DOWN,
 HOME,
 END,
 ENTER,
 SPACE,
 TAB,
 ESCAPE,
 BACKSPACE,
 DELETE,
 A,
 Z,
 ZERO,
 NINE,
 COMMA
} from '@angular/cdk/keycodes';

Coercion

Utility functions for coercing inputs into specific types.

import {
  coerceArray,
  coerceBooleanProperty, 
  coerceNumberProperty,
} from '@angular/cdk/coercion';   
// Coerces a data-bound value (typically a string) to a boolean
coerceBooleanProperty('true');
// Wraps the provided value in an array, unless the provided value is an array
coerceArray('value');
// Coerces a data-bound value (typically a string) to a number.
coerceNumberProperty('3');
coerceNumberProperty('123hello', fallbackValue)

Observers — cdkObserveContent

A directive for observing when the content of the host element changes.

@Component({
  selector: 'app-cdk-api',
  template: `
    <div (cdkObserveContent)="projectContentChanged()">
      <ng-content></ng-content>
    </div>
  `
})
export class CdkApiComponent {
projectContentChanged() {
console.log('ng-content changed');
}
}

Additional Resources —

• The official website
• A first look into the Angular CDK
• Angular CDK Portals
• Custom Overlays with Angular’s CDK by thoughtram