fix: add non-null assertions for non-nullable input bindings (#20136)

Due to a bug in the template type checker, binding expressions that include
`undefined` in their type which are bound to directive inputs that don't accept
`undefined` would not be reported as an error, if the directive declares at
least one coercion member using `ngAcceptInputType`. angular/angular#38273
fixes this bug, which uncovers some template issues.

Long-term, it would be best if the directives would be updated to include
`undefined` in an input's type as appropriate. This would require a larger
effort and is likely to introduce some breaking changes to public API.

Author: JoostK

src/dev-app/datepicker/datepicker-demo.html

@@ -51,7 +51,7 @@ <h2>Result</h2>
            [(ngModel)]="date"
            [min]="minDate"
            [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : undefined"
+           [matDatepickerFilter]="filterOdd ? dateFilter : undefined!"
            [disabled]="inputDisabled"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
@@ -81,7 +81,7 @@ <h2>Result</h2>
          [min]="minDate"
          [max]="maxDate"
          [disabled]="inputDisabled"
-         [matDatepickerFilter]="filterOdd ? dateFilter : undefined"
+         [matDatepickerFilter]="filterOdd ? dateFilter : undefined!"
          placeholder="Pick a date">
   <mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
   <mat-datepicker
@@ -99,7 +99,7 @@ <h2>Input disabled datepicker</h2>
   <mat-form-field>
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : undefined" disabled>
+           [matDatepickerFilter]="filterOdd ? dateFilter : undefined!" disabled>
     <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -111,7 +111,7 @@ <h2>Input disabled via FormControl</h2>
   <mat-form-field>
     <mat-label>FormControl disabled</mat-label>
     <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
     <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -127,7 +127,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
   <mat-form-field>
     <mat-label>Input disabled, datepicker enabled</mat-label>
     <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
     <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -144,7 +144,7 @@ <h2>Datepicker with value property binding</h2>
           This breaks strict template type checking. What should we do here?
     -->
     <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
     <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -183,7 +183,7 @@ <h2>Range picker</h2>
       [disabled]="inputDisabled"
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
-      [dateFilter]="filterOdd ? dateFilter : undefined">
+      [dateFilter]="filterOdd ? dateFilter : undefined!">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>
     </mat-date-range-input>
@@ -207,7 +207,7 @@ <h2>Range picker</h2>
       [disabled]="inputDisabled"
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
-      [dateFilter]="filterOdd ? dateFilter : undefined">
+      [dateFilter]="filterOdd ? dateFilter : undefined!">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>
     </mat-date-range-input>
@@ -232,7 +232,7 @@ <h2>Range picker</h2>
       [disabled]="inputDisabled"
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
-      [dateFilter]="filterOdd ? dateFilter : undefined">
+      [dateFilter]="filterOdd ? dateFilter : undefined!">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>
     </mat-date-range-input>

src/dev-app/stepper/stepper-demo.html

@@ -10,7 +10,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
   <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray"
                         [linear]="!isNonLinear" [disableRipple]="disableRipple">
-    <mat-step formGroupName="0" [stepControl]="formArray?.get([0]) === null ? undefined : formArray?.get([0])!">
+    <mat-step formGroupName="0" [stepControl]="formArray?.get([0]) === null ? undefined! : formArray?.get([0])!">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
         <mat-label>First name</mat-label>
@@ -28,7 +28,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       </div>
     </mat-step>
 
-    <mat-step formGroupName="1" [stepControl]="formArray?.get([1]) === null ? undefined : formArray?.get([1])!"
+    <mat-step formGroupName="1" [stepControl]="formArray?.get([1]) === null ? undefined! : formArray?.get([1])!"
               optional>
       <ng-template matStepLabel>
         <div>Fill out your email address</div>

src/material/paginator/paginator.html

@@ -7,7 +7,7 @@
 
       <mat-form-field
         *ngIf="_displayedPageSizeOptions.length > 1"
-        [appearance]="_formFieldAppearance"
+        [appearance]="_formFieldAppearance!"
         [color]="color"
         class="mat-paginator-page-size-select">
         <mat-select

src/material/select/select.html

@@ -24,7 +24,7 @@
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayOpen]="panelOpen"
   [cdkConnectedOverlayPositions]="_positions"
-  [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
+  [cdkConnectedOverlayMinWidth]="_triggerRect?.width!"
   [cdkConnectedOverlayOffsetY]="_offsetY"
   (backdropClick)="close()"
   (attach)="_onAttached()"