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>