feat: support strictNullChecks

e2e/tsconfig.json

@@ -11,6 +11,7 @@
     "outDir": "../dist/e2e/",
     "rootDir": ".",
     "sourceMap": true,
+    "strictNullChecks": true,
     "target": "es5",
     "typeRoots": [
       "../node_modules/@types"

src/demo-app/tsconfig-aot.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
+    "strictNullChecks": true,
     "target": "es5",
     "baseUrl": "",
     "typeRoots": [

src/demo-app/tsconfig.json

@@ -12,6 +12,7 @@
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
+    "strictNullChecks": true,
     "baseUrl": "",
     "typeRoots": [
       "../../node_modules/@types/!(node)"

src/e2e-app/tsconfig.json

@@ -12,6 +12,7 @@
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
+    "strictNullChecks": true,
     "baseUrl": "",
     "typeRoots": [
       "../../node_modules/@types/!(node)"

src/lib/autocomplete/autocomplete-trigger.ts

@@ -65,7 +65,7 @@ export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
   providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR]
 })
 export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
-  private _overlayRef: OverlayRef;
+  private _overlayRef: OverlayRef|null;
   private _portal: TemplatePortal;
   private _panelOpen: boolean = false;
 
@@ -123,7 +123,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       this._createOverlay();
     }
 
-    if (!this._overlayRef.hasAttached()) {
+    if (this._overlayRef && !this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._portal);
       this._subscribeToClosingActions();
     }
@@ -160,7 +160,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
   /** The currently active option, coerced to MdOption type. */
-  get activeOption(): MdOption {
+  get activeOption(): MdOption|undefined {
     if (this.autocomplete._keyManager) {
       return this.autocomplete._keyManager.activeItem as MdOption;
     }

src/lib/button-toggle/button-toggle.ts

@@ -40,7 +40,7 @@ var _uniqueIdCounter = 0;
 
 /** Change event object emitted by MdButtonToggle. */
 export class MdButtonToggleChange {
-  source: MdButtonToggle;
+  source: MdButtonToggle|null;
   value: any;
 }
 
@@ -63,13 +63,13 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   private _name: string = `md-button-toggle-group-${_uniqueIdCounter++}`;
 
   /** Disables all toggles in the group. */
-  private _disabled: boolean = null;
+  private _disabled: boolean|null = null;
 
   /** Whether the button toggle group should be vertical. */
   private _vertical: boolean = false;
 
   /** The currently selected button toggle, should match the value. */
-  private _selected: MdButtonToggle = null;
+  private _selected: MdButtonToggle|null = null;
 
   /** Whether the button toggle group is initialized or not. */
   private _isInitialized: boolean = false;
@@ -91,7 +91,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
 
   /** Child button toggle buttons. */
   @ContentChildren(forwardRef(() => MdButtonToggle))
-  _buttonToggles: QueryList<MdButtonToggle> = null;
+  _buttonToggles: QueryList<MdButtonToggle>|null = null;
 
   ngAfterViewInit() {
     this._isInitialized = true;
@@ -110,7 +110,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
 
   /** Whether the toggle group is disabled. */
   @Input()
-  get disabled(): boolean {
+  get disabled(): boolean|null {
     return this._disabled;
   }
 
@@ -154,7 +154,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
     return this._selected;
   }
 
-  set selected(selected: MdButtonToggle) {
+  set selected(selected: MdButtonToggle|null) {
     this._selected = selected;
     this.value = selected ? selected.value : null;
 
@@ -245,27 +245,21 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
 })
 export class MdButtonToggleGroupMultiple {
   /** Disables all toggles in the group. */
-  private _disabled: boolean = null;
+  private _disabled: boolean|null = null;
 
   /** Whether the button toggle group should be vertical. */
   private _vertical: boolean = false;
 
   /** Whether the toggle group is disabled. */
   @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
+  get disabled(): boolean|null { return this._disabled; }
   set disabled(value) {
     this._disabled = (value != null && value !== false) ? true : null;
   }
 
   /** Whether the toggle group is vertical. */
   @Input()
-  get vertical(): boolean {
-    return this._vertical;
-  }
-
+  get vertical(): boolean { return this._vertical; }
   set vertical(value) {
     this._vertical = coerceBooleanProperty(value);
   }
@@ -299,13 +293,13 @@ export class MdButtonToggle implements OnInit {
   name: string;
 
   /** Whether or not this button toggle is disabled. */
-  private _disabled: boolean = null;
+  private _disabled: boolean|null = null;
 
   /** Value assigned to this button toggle. */
   private _value: any = null;
 
   /** Whether or not the button toggle is a single selection. */
-  private _isSingleSelector: boolean = null;
+  private _isSingleSelector: boolean = false;
 
   /** The parent button toggle group (exclusive selection). Optional. */
   buttonToggleGroup: MdButtonToggleGroup;
@@ -413,12 +407,12 @@ export class MdButtonToggle implements OnInit {
   /** Whether the button is disabled. */
   @HostBinding('class.mat-button-toggle-disabled')
   @Input()
-  get disabled(): boolean {
+  get disabled(): boolean|null {
     return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) ||
         (this.buttonToggleGroupMultiple != null && this.buttonToggleGroupMultiple.disabled);
   }
 
-  set disabled(value: boolean) {
+  set disabled(value: boolean|null) {
     this._disabled = (value != null && value !== false) ? true : null;
   }
 

src/lib/button/button.ts

@@ -112,7 +112,7 @@ export class MdButton {
 
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean = false;
-  private _disabled: boolean = null;
+  private _disabled: boolean|null = null;
 
   /** Whether the ripple effect for this button is disabled. */
   @Input()
@@ -122,7 +122,7 @@ export class MdButton {
   /** Whether the button is disabled. */
   @Input()
   get disabled() { return this._disabled; }
-  set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value) ? true : null; }
+  set disabled(value: boolean|null) { this._disabled = coerceBooleanProperty(value) ? true : null; }
 
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
 

src/lib/checkbox/checkbox.ts

@@ -92,7 +92,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   /**
    * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
    */
-  @Input('aria-labelledby') ariaLabelledby: string = null;
+  @Input('aria-labelledby') ariaLabelledby: string|null = null;
 
   /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
   @Input() id: string = `md-checkbox-${++nextId}`;
@@ -146,7 +146,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   @Input() tabIndex: number = 0;
 
   /** Name value will be applied to the input element if present */
-  @Input() name: string = null;
+  @Input() name: string|null = null;
 
   /** Event emitted when the checkbox's `checked` value changes. */
   @Output() change: EventEmitter<MdCheckboxChange> = new EventEmitter<MdCheckboxChange>();
@@ -181,10 +181,10 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
 
   /** Reference to the focused state ripple. */
-  private _focusedRipple: RippleRef;
+  private _focusedRipple: RippleRef|null = null;
 
   /** Reference to the focus origin monitor subscription. */
-  private _focusedSubscription: Subscription;
+  private _focusedSubscription: Subscription|null = null;
 
   constructor(private _renderer: Renderer,
               private _elementRef: ElementRef,
@@ -400,31 +400,32 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
 
   private _getAnimationClassForCheckStateTransition(
       oldState: TransitionCheckState, newState: TransitionCheckState): string {
-    var animSuffix: string;
+
+    let animSuffix = '';
 
     switch (oldState) {
-    case TransitionCheckState.Init:
-      // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or
-      // [checked] bound to it.
-      if (newState === TransitionCheckState.Checked) {
-        animSuffix = 'unchecked-checked';
-      } else if (newState == TransitionCheckState.Indeterminate) {
-        animSuffix = 'unchecked-indeterminate';
-      } else {
-        return '';
-      }
-      break;
-    case TransitionCheckState.Unchecked:
-      animSuffix = newState === TransitionCheckState.Checked ?
-          'unchecked-checked' : 'unchecked-indeterminate';
-      break;
-    case TransitionCheckState.Checked:
-      animSuffix = newState === TransitionCheckState.Unchecked ?
-          'checked-unchecked' : 'checked-indeterminate';
-      break;
-    case TransitionCheckState.Indeterminate:
-      animSuffix = newState === TransitionCheckState.Checked ?
-          'indeterminate-checked' : 'indeterminate-unchecked';
+      case TransitionCheckState.Init:
+        // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or
+        // [checked] bound to it.
+        if (newState === TransitionCheckState.Checked) {
+          animSuffix = 'unchecked-checked';
+        } else if (newState == TransitionCheckState.Indeterminate) {
+          animSuffix = 'unchecked-indeterminate';
+        } else {
+          return '';
+        }
+        break;
+      case TransitionCheckState.Unchecked:
+        animSuffix = newState === TransitionCheckState.Checked ?
+            'unchecked-checked' : 'unchecked-indeterminate';
+        break;
+      case TransitionCheckState.Checked:
+        animSuffix = newState === TransitionCheckState.Unchecked ?
+            'checked-unchecked' : 'checked-indeterminate';
+        break;
+      case TransitionCheckState.Indeterminate:
+        animSuffix = newState === TransitionCheckState.Checked ?
+            'indeterminate-checked' : 'indeterminate-unchecked';
     }
 
     return `mat-checkbox-anim-${animSuffix}`;

src/lib/chips/chip-list.ts

@@ -134,7 +134,7 @@ export class MdChipList implements AfterContentInit {
     let focusedIndex = this._keyManager.activeItemIndex;
 
     if (this._isValidIndex(focusedIndex)) {
-      let focusedChip: MdChip = this.chips.toArray()[focusedIndex];
+      let focusedChip: MdChip = this.chips.toArray()[focusedIndex as number];
 
       if (focusedChip) {
         focusedChip.toggleSelected();
@@ -201,8 +201,8 @@ export class MdChipList implements AfterContentInit {
    * @param index The index to be checked.
    * @returns True if the index is valid for our list of chips.
    */
-  private _isValidIndex(index: number): boolean {
-    return index >= 0 && index < this.chips.length;
+  private _isValidIndex(index: number|null): boolean {
+    return typeof index === 'number' && index >= 0 && index < this.chips.length;
   }
 
 }

src/lib/chips/chip.ts

@@ -38,7 +38,7 @@ export interface MdChipEvent {
 export class MdChip implements Focusable, OnInit, OnDestroy {
 
   /** Whether or not the chip is disabled. Disabled chips cannot be focused. */
-  protected _disabled: boolean = null;
+  protected _disabled: boolean|null = null;
 
   /** Whether or not the chip is selected. */
   protected _selected: boolean = false;
@@ -70,12 +70,12 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
   }
 
   /** Whether or not the chip is disabled. */
-  @Input() get disabled(): boolean {
+  @Input() get disabled(): boolean|null {
     return this._disabled;
   }
 
   /** Sets the disabled state of the chip. */
-  set disabled(value: boolean) {
+  set disabled(value: boolean|null) {
     this._disabled = coerceBooleanProperty(value) ? true : null;
   }
 

src/lib/core/a11y/activedescendant-key-manager.ts

@@ -22,7 +22,7 @@ export class ActiveDescendantKeyManager extends ListKeyManager<Highlightable> {
    * It also adds active styles to the newly active item and removes active
    * styles from the previously active item.
    */
-  setActiveItem(index: number): void {
+  setActiveItem(index: number|null): void {
     if (this.activeItem) {
       this.activeItem.setInactiveStyles();
     }

src/lib/core/a11y/focus-key-manager.ts

@@ -21,9 +21,12 @@ export class FocusKeyManager extends ListKeyManager<Focusable> {
    * This method sets the active item to the item at the specified index.
    * It also adds focuses the newly active item.
    */
-  setActiveItem(index: number): void {
+  setActiveItem(index: number|null): void {
     super.setActiveItem(index);
-    this.activeItem.focus();
+
+    if (this.activeItem) {
+      this.activeItem.focus();
+    }
   }
 
 }