feat: nullability support

Adds compatibility with strictNullChecks to the library, tests, build and various test apps.

Fixes #3486.

Author: crisbeto

e2e/components/tabs-e2e.spec.ts

@@ -75,7 +75,7 @@ describe('tabs', () => {
  */
 async function getFocusStates(elements: ElementArrayFinder) {
   return elements.map(async (element) => {
-    let elementText = await element.getText();
+    let elementText = await element!.getText();
     let activeText = await browser.driver.switchTo().activeElement().getText();
 
     return activeText === elementText;
@@ -98,7 +98,7 @@ function getBodyActiveStates(elements: ElementArrayFinder) {
  */
 async function getClassStates(elements: ElementArrayFinder, className: string) {
   return elements.map(async (element) => {
-    let classes = await element.getAttribute('class');
+    let classes = await element!.getAttribute('class');
     return classes.split(/ +/g).indexOf(className) >= 0;
   });
 }

e2e/tsconfig.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "inlineSources": true,
     "lib": ["es2015"],
     "module": "commonjs",

src/cdk/tsconfig-build.json

@@ -6,6 +6,7 @@
     "declaration": true,
     "stripInternal": false,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "importHelpers": true,
     "module": "es2015",
     "moduleResolution": "node",

src/demo-app/checkbox/checkbox-demo.ts

@@ -41,6 +41,11 @@ export class MdCheckboxDemoNestedChecklist {
 
   allComplete(task: Task): boolean {
     let subtasks = task.subtasks;
+
+    if (!subtasks) {
+      return false;
+    }
+
     return subtasks.every(t => t.completed) ? true
         : subtasks.every(t => !t.completed) ? false
         : task.completed;

src/demo-app/data-table/data-table-demo.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {PeopleDatabase} from './people-database';
 import {PersonDataSource} from './person-data-source';
 
-export type UserProperties = 'userId' | 'userName' | 'progress' | 'color';
+export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined;
 
 @Component({
   moduleId: module.id,

src/demo-app/dialog/dialog-demo.ts

@@ -1,6 +1,6 @@
 import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
-import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
 
 
 @Component({
@@ -10,10 +10,10 @@ import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/ma
   styleUrls: ['dialog-demo.css'],
 })
 export class DialogDemo {
-  dialogRef: MdDialogRef<JazzDialog>;
+  dialogRef: MdDialogRef<JazzDialog> | null;
   lastCloseResult: string;
   actionsAlignment: string;
-  config: MdDialogConfig = {
+  config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,

src/demo-app/ripple/ripple-demo.ts

@@ -15,7 +15,7 @@ export class RippleDemo {
   disabled = false;
   unbounded = false;
   rounded = false;
-  radius: number = null;
+  radius: number;
   rippleSpeed = 1;
   rippleColor = '';
 

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -21,7 +21,7 @@ export class SnackBarDemo {
   open() {
     let config = new MdSnackBarConfig();
     config.duration = this.autoHide;
-    config.extraClasses = this.addExtraClass ? ['party'] : null;
-    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
+    config.extraClasses = this.addExtraClass ? ['party'] : undefined;
+    this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
   }
 }

src/demo-app/tsconfig-aot.json

@@ -1,10 +1,11 @@
-// TypeScript config that extends the demo-app tsconfig file. This config compiles the 
+// TypeScript config that extends the demo-app tsconfig file. This config compiles the
 // "main-aot.ts" file and also enables templage code generation / AOT. All paths need
 // to be relative to the output directory.
 {
   "extends": "./tsconfig-build",
   "compilerOptions": {
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "outDir": ".",
     "paths": {
       "@angular/material": ["./material"],

src/demo-app/tsconfig-build.json

@@ -5,6 +5,7 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "lib": ["es6", "es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",

src/e2e-app/dialog/dialog-e2e.ts

@@ -7,18 +7,15 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
   templateUrl: 'dialog-e2e.html'
 })
 export class DialogE2E {
-  dialogRef: MdDialogRef<TestDialog>;
+  dialogRef: MdDialogRef<TestDialog> | null;
 
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 
   constructor (private _dialog: MdDialog) { }
 
   private _openDialog(config?: MdDialogConfig) {
     this.dialogRef = this._dialog.open(TestDialog, config);
-
-    this.dialogRef.afterClosed().subscribe(() => {
-      this.dialogRef = null;
-    });
+    this.dialogRef.afterClosed().subscribe(() => this.dialogRef = null);
   }
 
   openDefault() {

src/e2e-app/fullscreen/fullscreen-e2e.ts

@@ -8,7 +8,7 @@ import {MdDialog, MdDialogRef} from '@angular/material';
 })
 export class FullscreenE2E {
 
-  dialogRef: MdDialogRef<TestDialog>;
+  dialogRef: MdDialogRef<TestDialog> | null;
 
   constructor (private _element: ElementRef, private _dialog: MdDialog) { }
 

src/e2e-app/tsconfig-build.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "lib": ["es6", "es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",

src/lib/autocomplete/autocomplete-trigger.ts

@@ -27,6 +27,7 @@ import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/fromEvent';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/observable/of';
 
 /**
  * The following style constants are necessary to save here in order
@@ -78,7 +79,7 @@ export function getMdAutocompleteMissingPanelError(): Error {
   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;
 
@@ -144,7 +145,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       this._overlayRef.updateSize();
     }
 
-    if (!this._overlayRef.hasAttached()) {
+    if (this._overlayRef && !this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._portal);
       this._subscribeToClosingActions();
     }
@@ -188,10 +189,12 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
   /** The currently active option, coerced to MdOption type. */
-  get activeOption(): MdOption {
+  get activeOption(): MdOption | null {
     if (this.autocomplete && this.autocomplete._keyManager) {
       return this.autocomplete._keyManager.activeItem as MdOption;
     }
+
+    return null;
   }
 
   /** Stream of clicks outside of the autocomplete panel. */
@@ -205,9 +208,11 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
         return this._panelOpen &&
                clickTarget !== this._element.nativeElement &&
                (!inputContainer || !inputContainer.contains(clickTarget)) &&
-               !this._overlayRef.overlayElement.contains(clickTarget);
+               (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
       });
     }
+
+    return Observable.of(null);
   }
 
   /**
@@ -303,8 +308,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    * height, so the active option will be just visible at the bottom of the panel.
    */
   private _scrollToOption(): void {
-    const optionOffset =
-        this.autocomplete._keyManager.activeItemIndex * AUTOCOMPLETE_OPTION_HEIGHT;
+    const optionOffset = this.autocomplete._keyManager.activeItemIndex ?
+        this.autocomplete._keyManager.activeItemIndex * AUTOCOMPLETE_OPTION_HEIGHT : 0;
     const newScrollTop =
         Math.max(0, optionOffset - AUTOCOMPLETE_PANEL_HEIGHT + AUTOCOMPLETE_OPTION_HEIGHT);
     this.autocomplete._setScrollTop(newScrollTop);
@@ -410,9 +415,9 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     return this._element.nativeElement.getBoundingClientRect().width;
   }
 
-  /** Reset active item to null so arrow events will activate the correct options.*/
+  /** Reset active item to -1 so arrow events will activate the correct options.*/
   private _resetActiveItem(): void {
-    this.autocomplete._keyManager.setActiveItem(null);
+    this.autocomplete._keyManager.setActiveItem(-1);
   }
 
   /**

src/lib/autocomplete/autocomplete.spec.ts

@@ -136,7 +136,7 @@ describe('MdAutocomplete', () => {
         // Note that we're running outside the Angular zone, in order to be able
         // to test properly without the subscription from `_subscribeToClosingActions`
         // giving us a false positive.
-        fixture.ngZone.runOutsideAngular(() => {
+        fixture.ngZone!.runOutsideAngular(() => {
           fixture.componentInstance.trigger.openPanel();
 
           Promise.resolve().then(() => {
@@ -328,7 +328,7 @@ describe('MdAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
+    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
     expect(overlayPane.getAttribute('dir')).toEqual('rtl');
 
   });
@@ -731,7 +731,7 @@ describe('MdAutocomplete', () => {
     it('should scroll to active options below the fold', fakeAsync(() => {
       tick();
       const scrollContainer =
-          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
+          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel')!;
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       tick();
@@ -752,7 +752,7 @@ describe('MdAutocomplete', () => {
     it('should scroll to active options on UP arrow', fakeAsync(() => {
       tick();
       const scrollContainer =
-          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
+          document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel')!;
 
       const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
       fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
@@ -934,7 +934,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = input.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       // Panel is offset by 6px in styles so that the underline has room to display.
@@ -958,7 +958,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = input.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom + 6)).toEqual(Math.floor(panelTop),
@@ -976,7 +976,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const inputTop = input.getBoundingClientRect().top;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       // Panel is offset by 24px in styles so that the label has room to display.
@@ -999,7 +999,7 @@ describe('MdAutocomplete', () => {
         fixture.detectChanges();
 
         const inputTop = input.getBoundingClientRect().top;
-        const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+        const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
         const panelBottom = panel.getBoundingClientRect().bottom;
 
         // Panel is offset by 24px in styles so that the label has room to display.
@@ -1182,7 +1182,7 @@ describe('MdAutocomplete', () => {
 
     const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
     // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
-    expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300);
+    expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
 
     widthFixture.componentInstance.trigger.closePanel();
     widthFixture.detectChanges();
@@ -1194,7 +1194,7 @@ describe('MdAutocomplete', () => {
     widthFixture.detectChanges();
 
     // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
-    expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
+    expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(500);
   });
 
   it('should update the width while the panel is open', () => {
@@ -1209,7 +1209,7 @@ describe('MdAutocomplete', () => {
     const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
     const input = widthFixture.debugElement.query(By.css('input')).nativeElement;
 
-    expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300);
+    expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
 
     widthFixture.componentInstance.width = 500;
     widthFixture.detectChanges();
@@ -1218,7 +1218,7 @@ describe('MdAutocomplete', () => {
     dispatchFakeEvent(input, 'input');
     widthFixture.detectChanges();
 
-    expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
+    expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(500);
   });
 
   it('should show the panel when the options are initialized later within a component with ' +

src/lib/autocomplete/autocomplete.ts

@@ -48,7 +48,7 @@ export class MdAutocomplete implements AfterContentInit {
   @ContentChildren(MdOption) options: QueryList<MdOption>;
 
   /** Function that maps an option's control value to its display value in the trigger. */
-  @Input() displayWith: (value: any) => string;
+  @Input() displayWith: ((value: any) => string) | null = null;
 
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;

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

@@ -256,7 +256,7 @@ describe('MdButtonToggle', () => {
       for (let buttonToggle of buttonToggleInstances) {
         expect(buttonToggle.checked).toBe(groupInstance.value === buttonToggle.value);
       }
-      expect(groupInstance.selected.value).toBe(groupInstance.value);
+      expect(groupInstance.selected!.value).toBe(groupInstance.value);
     });
 
     it('should have the correct FormControl state initially and after interaction',
@@ -595,7 +595,7 @@ describe('MdButtonToggle', () => {
 class ButtonTogglesInsideButtonToggleGroup {
   isGroupDisabled: boolean = false;
   isVertical: boolean = false;
-  groupValue: string = null;
+  groupValue: string;
 }
 
 @Component({