build: components should be built with strict type checking

All components which are exported should be built with Ivy's
strict template type checking. This guarantees maximum safety
for template bindings and increases general code health in
the components repository.

Author: devversion

src/cdk/stepper/stepper.ts

@@ -34,7 +34,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {Observable, of as obaservableOf, Subject} from 'rxjs';
+import {Observable, of as observableOf, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {CdkStepHeader} from './step-header';
 import {CdkStepLabel} from './step-label';
@@ -254,7 +254,11 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
   /** The list of step components that the stepper is holding. */
-  get steps():  QueryList<CdkStep> {
+  get steps(): QueryList<CdkStep> {
+    // Note that the query list cannot be used in the template as iterable
+    // because it breaks Ivy's strict template type checking. Therefore the
+    // template currently uses "steps.toArray()". Read more about this:
+    // https://github.com/angular/angular/issues/29842
     return this._steps;
   }
 
@@ -331,7 +335,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
       .withWrap()
       .withVerticalOrientation(this._orientation === 'vertical');
 
-    (this._dir ? this._dir.change as Observable<Direction> : obaservableOf<Direction>())
+    (this._dir ? this._dir.change as Observable<Direction> : observableOf<Direction>())
       .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
       .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
 

src/material/button-toggle/button-toggle.html

@@ -3,7 +3,7 @@
         [id]="buttonId"
         [attr.tabindex]="disabled ? -1 : tabIndex"
         [attr.aria-pressed]="checked"
-        [disabled]="disabled || null"
+        [disabled]="disabled"
         [attr.name]="name || null"
         [attr.aria-label]="ariaLabel"
         [attr.aria-labelledby]="ariaLabelledby"

src/material/core/option/option.html

@@ -1,5 +1,5 @@
 <mat-pseudo-checkbox *ngIf="multiple" class="mat-option-pseudo-checkbox"
-    [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
+    [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox>
 
 <span class="mat-option-text"><ng-content></ng-content></span>
 

src/material/datepicker/calendar-body.ts

@@ -23,7 +23,8 @@ import {take} from 'rxjs/operators';
 /**
  * Extra CSS classes that can be associated with a calendar cell.
  */
-export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
+export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any}
+  | undefined;
 
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -63,11 +64,17 @@ export class MatCalendarBody implements OnChanges {
   /** The cells to display in the table. */
   @Input() rows: MatCalendarCell[][];
 
-  /** The value in the table that corresponds to today. */
-  @Input() todayValue: number;
+  /**
+   * The value in the table that corresponds to today. Can be set to null if no
+   * cell in the table corresponds to today.
+   */
+  @Input() todayValue: number|null;
 
-  /** The value in the table that is currently selected. */
-  @Input() selectedValue: number;
+  /**
+   * The value in the table that is currently selected. Null if no cell in the
+   * table is selected.
+   */
+  @Input() selectedValue: number|null;
 
   /** The minimum number of free cells needed to fit the label in the first row. */
   @Input() labelMinRequiredCells: number;

src/material/datepicker/year-view.html

@@ -5,8 +5,8 @@
   <tbody mat-calendar-body
          [label]="_yearLabel"
          [rows]="_months"
-         [todayValue]="_todayMonth"
-         [selectedValue]="_selectedMonth"
+         [todayValue]="_todayMonth!"
+         [selectedValue]="_selectedMonth!"
          [labelMinRequiredCells]="2"
          [numCols]="4"
          [cellAspectRatio]="4 / 7"

src/material/select/select.ts

@@ -22,7 +22,12 @@ import {
   UP_ARROW,
   hasModifierKey,
 } from '@angular/cdk/keycodes';
-import {CdkConnectedOverlay, Overlay, ScrollStrategy} from '@angular/cdk/overlay';
+import {
+  CdkConnectedOverlay,
+  ConnectedPosition,
+  Overlay,
+  ScrollStrategy
+} from '@angular/cdk/overlay';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentInit,
@@ -299,7 +304,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    * the trigger completely). If the panel cannot fit below the trigger, it
    * will fall back to a position above the trigger.
    */
-  _positions = [
+  _positions: ConnectedPosition[] = [
     {
       originX: 'start',
       originY: 'top',

src/material/stepper/stepper-horizontal.html

@@ -1,5 +1,5 @@
 <div class="mat-horizontal-stepper-header-container">
-  <ng-container *ngFor="let step of steps; let i = index; let isLast = last">
+  <ng-container *ngFor="let step of steps.toArray(); let i = index; let isLast = last">
     <mat-step-header class="mat-horizontal-stepper-header"
                      (click)="step.select()"
                      (keydown)="_onKeydown($event)"
@@ -26,7 +26,7 @@
 </div>
 
 <div class="mat-horizontal-content-container">
-  <div *ngFor="let step of steps; let i = index"
+  <div *ngFor="let step of steps.toArray(); let i = index"
        [attr.tabindex]="selectedIndex === i ? 0 : null"
        class="mat-horizontal-stepper-content" role="tabpanel"
        [@stepTransition]="_getAnimationDirection(i)"

src/material/stepper/stepper-vertical.html

@@ -1,4 +1,4 @@
-<div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">
+<div class="mat-step" *ngFor="let step of steps.toArray(); let i = index; let isLast = last">
   <mat-step-header class="mat-vertical-stepper-header"
                    (click)="step.select()"
                    (keydown)="_onKeydown($event)"

src/material/tabs/tab-body.ts

@@ -147,7 +147,7 @@ export class MatTabBody implements OnInit, OnDestroy {
   @Input('content') _content: TemplatePortal;
 
   /** Position that will be used when the tab is immediately becoming visible after creation. */
-  @Input() origin: number;
+  @Input() origin: number|null;
 
   // Note that the default value will always be overwritten by `MatTabBody`, but we need one
   // anyway to prevent the animations module from throwing an error if the body is used on its own.
@@ -194,7 +194,7 @@ export class MatTabBody implements OnInit, OnDestroy {
    */
   ngOnInit() {
     if (this._position == 'center' && this.origin != null) {
-      this._position = this._computePositionFromOrigin();
+      this._position = this._computePositionFromOrigin(this.origin);
     }
   }
 
@@ -238,10 +238,10 @@ export class MatTabBody implements OnInit, OnDestroy {
    * Computes the position state based on the specified origin position. This is used if the
    * tab is becoming visible immediately after creation.
    */
-  private _computePositionFromOrigin(): MatTabBodyPositionState {
+  private _computePositionFromOrigin(origin: number): MatTabBodyPositionState {
     const dir = this._getLayoutDirection();
 
-    if ((dir == 'ltr' && this.origin <= 0) || (dir == 'rtl' && this.origin > 0)) {
+    if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
       return 'left-origin-center';
     }
 

src/material/tabs/tab-group.html

@@ -1,10 +1,10 @@
 <mat-tab-header #tabHeader
-               [selectedIndex]="selectedIndex"
-               [disableRipple]="disableRipple"
-               (indexFocused)="_focusChanged($event)"
-               (selectFocusedIndex)="selectedIndex = $event">
+                [selectedIndex]="selectedIndex || 0"
+                [disableRipple]="disableRipple"
+                (indexFocused)="_focusChanged($event)"
+                (selectFocusedIndex)="selectedIndex = $event">
   <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple cdkMonitorElementFocus
-       *ngFor="let tab of _tabs; let i = index"
+       *ngFor="let tab of _tabs.toArray(); let i = index"
        [id]="_getTabLabelId(i)"
        [attr.tabIndex]="_getTabIndex(tab, i)"
        [attr.aria-posinset]="i + 1"
@@ -36,12 +36,12 @@
   [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
-               *ngFor="let tab of _tabs; let i = index"
+               *ngFor="let tab of _tabs.toArray(); let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
                [class.mat-tab-body-active]="selectedIndex == i"
-               [content]="tab.content"
-               [position]="tab.position"
+               [content]="tab.content!"
+               [position]="tab.position!"
                [origin]="tab.origin"
                [animationDuration]="animationDuration"
                (_onCentered)="_removeTabBodyWrapperHeight()"

tools/public_api_guard/cdk/stepper.d.ts

@@ -12,7 +12,7 @@ export declare class CdkStep implements OnChanges {
     label: string;
     optional: boolean;
     state: StepState;
-    stepControl: FormControlLike;
+    stepControl: AbstractControlLike;
     stepLabel: CdkStepLabel;
     constructor(_stepper: CdkStepper, stepperOptions?: StepperOptions);
     ngOnChanges(): void;

tools/public_api_guard/material/datepicker.d.ts

@@ -56,9 +56,9 @@ export declare class MatCalendarBody implements OnChanges {
     labelMinRequiredCells: number;
     numCols: number;
     rows: MatCalendarCell[][];
-    selectedValue: number;
+    selectedValue: number | null;
     readonly selectedValueChange: EventEmitter<number>;
-    todayValue: number;
+    todayValue: number | null;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
     _cellClicked(cell: MatCalendarCell): void;
     _focusActiveCell(): void;
@@ -68,20 +68,16 @@ export declare class MatCalendarBody implements OnChanges {
 
 export declare class MatCalendarCell {
     ariaLabel: string;
-    cssClasses?: string | Set<string> | {
-        [key: string]: any;
-    } | string[] | undefined;
+    cssClasses?: MatCalendarCellCssClasses;
     displayValue: string;
     enabled: boolean;
     value: number;
-    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: string | Set<string> | {
-        [key: string]: any;
-    } | string[] | undefined);
+    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: MatCalendarCellCssClasses);
 }
 
 export declare type MatCalendarCellCssClasses = string | string[] | Set<string> | {
     [key: string]: any;
-};
+} | undefined;
 
 export declare class MatCalendarHeader<D> {
     calendar: MatCalendar<D>;

tools/public_api_guard/material/select.d.ts

@@ -20,12 +20,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     readonly _openedStream: Observable<void>;
     _optionIds: string;
     _panelDoneAnimatingStream: Subject<string>;
-    _positions: {
-        originX: string;
-        originY: string;
-        overlayX: string;
-        overlayY: string;
-    }[];
+    _positions: ConnectedPosition[];
     _scrollStrategy: ScrollStrategy;
     _selectionModel: SelectionModel<MatOption>;
     _transformOrigin: string;

tools/public_api_guard/material/tabs.d.ts

@@ -45,7 +45,7 @@ export declare class MatTabBody implements OnInit, OnDestroy {
     _position: MatTabBodyPositionState;
     _translateTabComplete: Subject<AnimationEvent>;
     animationDuration: string;
-    origin: number;
+    origin: number | null;
     position: number;
     constructor(_elementRef: ElementRef<HTMLElement>, _dir: Directionality, changeDetectorRef: ChangeDetectorRef);
     _getLayoutDirection(): Direction;