fix(multiple): resolve extended template diagnostic warnings (#25546)

Turns the extended template diagnostic warnings into errors and resolves all of the existing ones.

Author: crisbeto

src/bazel-tsconfig-build.json

@@ -32,6 +32,11 @@
     "skipLibCheck": true,
     "types": ["tslib"]
   },
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "defaultCategory": "error"
+    }
+  },
   "bazelOptions": {
     "suppressTsconfigOverrideWarnings": true
   }

src/components-examples/material/form-field/form-field-custom-control/example-tel-input-example.html

@@ -1,6 +1,6 @@
 <div role="group" class="example-tel-input-container"
      [formGroup]="parts"
-     [attr.aria-labelledby]="_formField?.getLabelId()"
+     [attr.aria-labelledby]="_formField.getLabelId()"
      (focusin)="onFocusIn($event)"
      (focusout)="onFocusOut($event)">
   <input class="example-tel-input-element"

src/components-examples/material/form-field/form-field-hint/form-field-hint-example.html

@@ -2,7 +2,7 @@
   <mat-form-field hintLabel="Max 10 characters" appearance="fill">
     <mat-label>Enter some input</mat-label>
     <input matInput #input maxlength="10" placeholder="Ex. Nougat">
-    <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+    <mat-hint align="end">{{input.value.length}}/10</mat-hint>
   </mat-form-field>
 
   <mat-form-field appearance="fill">

src/components-examples/material/list/list-single-selection/list-single-selection-example.html

@@ -5,5 +5,5 @@
 </mat-selection-list>
 
 <p>
-  Option selected: {{shoes.selectedOptions.selected[0]?.value}}
+  Option selected: {{shoes.selectedOptions.hasValue() ? shoes.selectedOptions.selected[0].value : 'None'}}
 </p>

src/dev-app/example/example-list.ts

@@ -23,7 +23,7 @@ import {Example} from './example';
       <mat-expansion-panel *ngFor="let id of ids" [expanded]="expandAll">
         <mat-expansion-panel-header>
           <div class="header">
-            <div class="title"> {{exampleComponents[id]?.title}} </div>
+            <div class="title">{{_getTitle(id)}}</div>
             <div class="id"> <{{id}}> </div>
           </div>
         </mat-expansion-panel-header>
@@ -76,4 +76,8 @@ export class ExampleList {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
+
+  protected _getTitle(id: string) {
+    return this.exampleComponents[id]?.title;
+  }
 }

src/dev-app/legacy-select/legacy-select-demo.html

@@ -23,7 +23,7 @@
     <p> Value: {{ currentDrink }} </p>
     <p> Touched: {{ drinkControl.touched }} </p>
     <p> Dirty: {{ drinkControl.dirty }} </p>
-    <p> Status: {{ drinkControl.control?.status }} </p>
+    <p> Status: {{ drinkControl.status }} </p>
     <p>
       <label for="floating-placeholder">Floating placeholder:</label>
       <select [(ngModel)]="floatLabel" id="floating-placeholder">
@@ -70,7 +70,7 @@
       <p> Value: {{ currentPokemon }} </p>
       <p> Touched: {{ pokemonControl.touched }} </p>
       <p> Dirty: {{ pokemonControl.dirty }} </p>
-      <p> Status: {{ pokemonControl.control?.status }} </p>
+      <p> Status: {{ pokemonControl.status }} </p>
       <p>
         <label for="pokemon-theme">Theme:</label>
         <select [(ngModel)]="pokemonTheme" id="pokemon-theme">
@@ -139,7 +139,7 @@
       <p> Value: {{ currentDrinkObject | json }} </p>
       <p> Touched: {{ drinkObjectControl.touched }} </p>
       <p> Dirty: {{ drinkObjectControl.dirty }} </p>
-      <p> Status: {{ drinkObjectControl.control?.status }} </p>
+      <p> Status: {{ drinkObjectControl.status }} </p>
       <p> Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }} </p>
 
       <button mat-button (click)="reassignDrinkByCopy()"

src/dev-app/legacy-select/legacy-select-demo.ts

@@ -59,7 +59,7 @@ export class LegacySelectDemo {
   currentPokemonFromGroup: string;
   currentDigimon: string;
   currentAppearanceValue: string | null;
-  latestChangeEvent: MatSelectChange;
+  latestChangeEvent: MatSelectChange | undefined;
   floatLabel: FloatLabelType = 'auto';
   drinksWidth = 'default';
   foodControl = new FormControl('pizza-1');

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

@@ -24,7 +24,7 @@
       <p> Value: {{ currentDrink }} </p>
       <p> Touched: {{ drinkControl.touched }} </p>
       <p> Dirty: {{ drinkControl.dirty }} </p>
-      <p> Status: {{ drinkControl.control?.status }} </p>
+      <p> Status: {{ drinkControl.status }} </p>
       <p>
         <label for="floating-label">Floating label:</label>
         <select [(ngModel)]="floatLabel" id="floating-label">
@@ -72,7 +72,7 @@
       <p> Value: {{ currentPokemon }} </p>
       <p> Touched: {{ pokemonControl.touched }} </p>
       <p> Dirty: {{ pokemonControl.dirty }} </p>
-      <p> Status: {{ pokemonControl.control?.status }} </p>
+      <p> Status: {{ pokemonControl.status }} </p>
       <p>
         <label for="pokemon-theme">Theme:</label>
         <select [(ngModel)]="pokemonTheme" id="pokemon-theme">
@@ -143,7 +143,7 @@
       <p> Value: {{ currentDrinkObject | json }} </p>
       <p> Touched: {{ drinkObjectControl.touched }} </p>
       <p> Dirty: {{ drinkObjectControl.dirty }} </p>
-      <p> Status: {{ drinkObjectControl.control?.status }} </p>
+      <p> Status: {{ drinkObjectControl.status }} </p>
       <p> Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }} </p>
 
       <button mat-button (click)="reassignDrinkByCopy()"

src/dev-app/select/select-demo.ts

@@ -56,7 +56,7 @@ export class SelectDemo {
   currentPokemonFromGroup: string;
   currentDigimon: string;
   currentAppearanceValue: string | null;
-  latestChangeEvent: MatSelectChange;
+  latestChangeEvent: MatSelectChange | undefined;
   floatLabel: FloatLabelType = 'auto';
   drinksWidth = 'default';
   foodControl = new FormControl('pizza-1');

src/material/legacy-select/select.html

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

src/material/legacy-select/select.ts

@@ -131,7 +131,7 @@ export class MatLegacySelect extends _MatSelectBase<MatLegacySelectChange> imple
   private _scrollTop = 0;
 
   /** The last measured value for the trigger's client bounding rect. */
-  _triggerRect: ClientRect;
+  private _triggerRect: ClientRect;
 
   /** The cached font-size of the trigger element. */
   _triggerFontSize = 0;
@@ -264,6 +264,10 @@ export class MatLegacySelect extends _MatSelectBase<MatLegacySelectChange> imple
     return new MatLegacySelectChange(this, value);
   }
 
+  protected _getOverlayMinWidth(): number {
+    return this._triggerRect?.width;
+  }
+
   /**
    * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
    * This must be adjusted to align the selected option text over the trigger text when

tools/public_api_guard/material/legacy-select.md

@@ -53,6 +53,8 @@ export class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit
     // (undocumented)
     protected _getChangeEvent(value: any): MatSelectChange;
     // (undocumented)
+    protected _getOverlayMinWidth(): number;
+    // (undocumented)
     ngOnInit(): void;
     _offsetY: number;
     // (undocumented)
@@ -70,7 +72,6 @@ export class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit
     protected _scrollOptionIntoView(index: number): void;
     _transformOrigin: string;
     _triggerFontSize: number;
-    _triggerRect: ClientRect;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false>;
     // (undocumented)

tsconfig.json

@@ -39,7 +39,10 @@
     }
   },
   "angularCompilerOptions": {
-    "strictTemplates": true
+    "strictTemplates": true,
+    "extendedDiagnostics": {
+      "defaultCategory": "error"
+    }
   },
   "include": [
     "src/**/*.ts",