build: make material-examples compatible with ivy template type checking

Author: devversion

src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html

@@ -2,7 +2,7 @@
   <mat-form-field class="example-full-width">
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+      <mat-option *ngFor="let option of (filteredOptions | async)!" [value]="option">
         {{option}}
       </mat-option>
     </mat-autocomplete>

src/material-examples/autocomplete-display/autocomplete-display-example.html

@@ -2,7 +2,7 @@
   <mat-form-field class="example-full-width">
     <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+      <mat-option *ngFor="let option of (filteredOptions | async)!" [value]="option">
         {{option.name}}
       </mat-option>
     </mat-autocomplete>

src/material-examples/autocomplete-display/autocomplete-display-example.ts

@@ -33,8 +33,8 @@ export class AutocompleteDisplayExample implements OnInit {
       );
   }
 
-  displayFn(user?: User): string | undefined {
-    return user ? user.name : undefined;
+  displayFn(user: User): string {
+    return user.name;
   }
 
   private _filter(name: string): User[] {

src/material-examples/autocomplete-filter/autocomplete-filter-example.html

@@ -2,7 +2,7 @@
   <mat-form-field class="example-full-width">
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+      <mat-option *ngFor="let option of (filteredOptions | async)!" [value]="option">
         {{option}}
       </mat-option>
     </mat-autocomplete>

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -2,7 +2,7 @@
   <mat-form-field>
     <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
       <mat-autocomplete #autoGroup="matAutocomplete">
-        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
+        <mat-optgroup *ngFor="let group of (stateGroupOptions | async)!" [label]="group.letter">
           <mat-option *ngFor="let name of group.names" [value]="name">
             {{name}}
           </mat-option>

src/material-examples/autocomplete-overview/autocomplete-overview-example.html

@@ -2,7 +2,7 @@
   <mat-form-field class="example-full-width">
     <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
+      <mat-option *ngFor="let state of (filteredStates | async)!" [value]="state.name">
         <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
         <span>{{state.name}}</span> |
         <small>Population: {{state.population}}</small>

src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html

@@ -1,7 +1,7 @@
 <form class="example-form">
   <input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete">
-    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
+    <mat-option *ngFor="let street of (filteredStreets | async)!" [value]="street">
       {{street}}
     </mat-option>
   </mat-autocomplete>

src/material-examples/cdk-custom-stepper-without-form/example-custom-stepper.html

@@ -11,7 +11,7 @@ <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
     <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
     <button
       class="example-step"
-      *ngFor="let step of steps; let i = index"
+      *ngFor="let step of steps.toArray(); let i = index"
       [ngClass]="{ 'example-active': selectedIndex === i }"
       (click)="onClick(i)"
     >

src/material-examples/checkbox-configurable/checkbox-configurable-example.ts

@@ -11,6 +11,6 @@ import {Component} from '@angular/core';
 export class CheckboxConfigurableExample {
   checked = false;
   indeterminate = false;
-  labelPosition = 'after';
+  labelPosition: 'after'|'before' = 'after';
   disabled = false;
 }

src/material-examples/chips-autocomplete/chips-autocomplete-example.html

@@ -19,7 +19,7 @@
       (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
+    <mat-option *ngFor="let fruit of (filteredFruits | async)!" [value]="fruit">
       {{fruit}}
     </mat-option>
   </mat-autocomplete>

src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 /**
  * @title Configurable progress-bar
@@ -9,8 +10,8 @@ import {Component} from '@angular/core';
   styleUrls: ['progress-bar-configurable-example.css'],
 })
 export class ProgressBarConfigurableExample {
-  color = 'primary';
-  mode = 'determinate';
+  color: ThemePalette = 'primary';
+  mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
   value = 50;
   bufferValue = 75;
 }

src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 /**
  * @title Configurable progress spinner
@@ -9,7 +10,7 @@ import {Component} from '@angular/core';
   styleUrls: ['progress-spinner-configurable-example.css'],
 })
 export class ProgressSpinnerConfigurableExample {
-  color = 'primary';
-  mode = 'determinate';
+  color: ThemePalette = 'primary';
+  mode: 'determinate' | 'indeterminate' = 'determinate';
   value = 50;
 }

src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 /**
  * @title Configurable slide-toggle
@@ -9,7 +10,7 @@ import {Component} from '@angular/core';
   styleUrls: ['slide-toggle-configurable-example.css'],
 })
 export class SlideToggleConfigurableExample {
-  color = 'accent';
+  color: ThemePalette = 'accent';
   checked = false;
   disabled = false;
 }

src/material-examples/tab-group-async/tab-group-async-example.html

@@ -3,7 +3,18 @@
 </ng-container>
 
 <mat-tab-group>
-  <mat-tab *ngFor="let tab of asyncTabs | async">
+    <!--
+
+        TODO for review: In that case it's quite weird because with the async pipe
+        the expression can evaluate to "null". The "[ngForOf]" input type does not accept
+        "null" so it fails the strict Ivy template check... At runtime it works because
+        there is a simple "truthy" check in the NgForOf directive... but the current
+        type is incompatible and seems like it can become a general impacting issue with Ivy.
+
+        For reference: there are issues for the async pipe which could also return "undefined".
+        See: https://github.com/angular/angular/issues/16982
+     -->
+  <mat-tab *ngFor="let tab of (asyncTabs | async)!">
     <ng-template mat-tab-label>{{tab.label}}</ng-template>
     {{tab.content}}
   </mat-tab>

src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 /**
  * @title Basic use of the tab nav bar
@@ -11,9 +12,9 @@ import {Component} from '@angular/core';
 export class TabNavBarBasicExample {
   links = ['First', 'Second', 'Third'];
   activeLink = this.links[0];
-  background = '';
+  background: ThemePalette = undefined;
 
   toggleBackground() {
-    this.background = this.background ? '' : 'primary';
+    this.background = this.background ? undefined : 'primary';
   }
 }

src/material-examples/table-text-column-advanced/table-text-column-advanced-example.ts

@@ -39,5 +39,5 @@ export class TableTextColumnAdvancedExample {
   decimalPipe = new DecimalPipe('en-US');
 
   /** Data accessor function that transforms the weight value to have at most 2 decimal digits. */
-  getWeight = (data: PeriodicElement) => this.decimalPipe.transform(data.weight, '1.0-2');
+  getWeight = (data: PeriodicElement) => this.decimalPipe.transform(data.weight, '1.0-2')!;
 }

src/material-examples/tree-dynamic/tree-dynamic-example.ts

@@ -1,4 +1,4 @@
-import {CollectionViewer, SelectionChange} from '@angular/cdk/collections';
+import {CollectionViewer, DataSource, SelectionChange} from '@angular/cdk/collections';
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {Component, Injectable} from '@angular/core';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
@@ -45,7 +45,7 @@ export class DynamicDatabase {
  * structure.
  */
 @Injectable()
-export class DynamicDataSource {
+export class DynamicDataSource implements DataSource<DynamicFlatNode> {
 
   dataChange = new BehaviorSubject<DynamicFlatNode[]>([]);
 
@@ -69,6 +69,8 @@ export class DynamicDataSource {
     return merge(collectionViewer.viewChange, this.dataChange).pipe(map(() => this.data));
   }
 
+  disconnect(): void {}
+
   /** Handle expand/collapse behaviors */
   handleTreeControl(change: SelectionChange<DynamicFlatNode>) {
     if (change.added) {