build: material components should be built with strict type checking

Author: devversion

src/cdk/stepper/stepper.ts

@@ -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;
   }
 

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()"