refactor: remove QueryList workaround for type checking (#17789)

In earlier 9.0 RCs `QueryList` wasn't inferred as iterable and we were getting compiler errors. The way we worked around it was to convert it into an array. Now that the compiler handles `QueryList` correctly we don't need the workarounds anymore.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -261,12 +261,6 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
    */
   @ContentChildren(CdkStep, {descendants: true}) _steps: QueryList<CdkStep>;
 
-  /**
-   * We need to store the steps in an Iterable due to strict template type checking with *ngFor and
-   * https://github.com/angular/angular/issues/29842.
-   */
-  _stepsArray: CdkStep[] = [];
-
   /** The list of step components that the stepper is holding. */
   get steps(): QueryList<CdkStep> {
     return this._steps;

src/components-examples/cdk/stepper/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 _stepsArray; let i = index"
+      *ngFor="let step of steps; let i = index"
       [ngClass]="{ 'example-active': selectedIndex === i }"
       (click)="onClick(i)"
     >

src/material-experimental/mdc-tabs/tab-group.html

@@ -9,7 +9,7 @@
        role="tab"
        matTabLabelWrapper
        cdkMonitorElementFocus
-       *ngFor="let tab of _tabsArray; let i = index"
+       *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [attr.tabIndex]="_getTabIndex(tab, i)"
        [attr.aria-posinset]="i + 1"
@@ -51,7 +51,7 @@
   [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
-               *ngFor="let tab of _tabsArray; let i = index"
+               *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
                [class.mat-mdc-tab-body-active]="selectedIndex == i"

src/material/stepper/stepper-horizontal.html

@@ -1,5 +1,5 @@
 <div class="mat-horizontal-stepper-header-container">
-  <ng-container *ngFor="let step of _stepsArray; let i = index; let isLast = last">
+  <ng-container *ngFor="let step of steps; 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 _stepsArray; let i = index"
+  <div *ngFor="let step of steps; 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 _stepsArray; let i = index; let isLast = last">
+<div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">
   <mat-step-header class="mat-vertical-stepper-header"
                    (click)="step.select()"
                    (keydown)="_onKeydown($event)"

src/material/stepper/stepper.ts

@@ -112,12 +112,10 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   _animationDone = new Subject<AnimationEvent>();
 
   ngAfterContentInit() {
-    this._stepsArray = this.steps.toArray();
     this._icons.forEach(({name, templateRef}) => this._iconOverrides[name] = templateRef);
 
     // Mark the component for change detection whenever the content children query changes
     this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      this._stepsArray = this.steps.toArray();
       this._stateChanged();
     });
 

src/material/tabs/tab-group.html

@@ -5,7 +5,7 @@
                (indexFocused)="_focusChanged($event)"
                (selectFocusedIndex)="selectedIndex = $event">
   <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple cdkMonitorElementFocus
-       *ngFor="let tab of _tabsArray; let i = index"
+       *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [attr.tabIndex]="_getTabIndex(tab, i)"
        [attr.aria-posinset]="i + 1"
@@ -37,7 +37,7 @@
   [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
-               *ngFor="let tab of _tabsArray; let i = index"
+               *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
                [class.mat-tab-body-active]="selectedIndex == i"

src/material/tabs/tab-group.ts

@@ -89,12 +89,6 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
   /** All of the tabs that belong to the group. */
   _tabs: QueryList<MatTab> = new QueryList<MatTab>();
 
-  /**
-   * We need to store the tabs in an Iterable due to strict template type checking with *ngFor and
-   * https://github.com/angular/angular/issues/29842.
-   */
-  _tabsArray: MatTab[] = [];
-
   /** The tab index that should be selected after the content has been checked. */
   private _indexToSelect: number | null = 0;
 
@@ -234,20 +228,19 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
   ngAfterContentInit() {
     this._subscribeToAllTabChanges();
     this._subscribeToTabLabels();
-    this._tabsArray = this._tabs.toArray();
 
     // Subscribe to changes in the amount of tabs, in order to be
     // able to re-render the content as new tabs are added or removed.
     this._tabsSubscription = this._tabs.changes.subscribe(() => {
       const indexToSelect = this._clampTabIndex(this._indexToSelect);
-      this._tabsArray = this._tabs.toArray();
 
       // Maintain the previously-selected tab if a new tab is added or removed and there is no
       // explicit change that selects a different tab.
       if (indexToSelect === this._selectedIndex) {
+        const tabs = this._tabs.toArray();
 
-        for (let i = 0; i < this._tabsArray.length; i++) {
-          if (this._tabsArray[i].isActive) {
+        for (let i = 0; i < tabs.length; i++) {
+          if (tabs[i].isActive) {
             // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed
             // event, otherwise the consumer may end up in an infinite loop in some edge cases like
             // adding a tab within the `selectedIndexChange` event.

tools/public_api_guard/cdk/stepper.d.ts

@@ -48,7 +48,6 @@ export declare class CdkStepper implements AfterViewInit, OnDestroy {
     protected _orientation: StepperOrientation;
     _stepHeader: QueryList<FocusableOption>;
     _steps: QueryList<CdkStep>;
-    _stepsArray: CdkStep[];
     linear: boolean;
     selected: CdkStep;
     selectedIndex: number;

tools/public_api_guard/material/tabs.d.ts

@@ -36,7 +36,6 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     abstract _tabBodyWrapper: ElementRef;
     abstract _tabHeader: MatTabGroupBaseHeader;
     _tabs: QueryList<MatTab>;
-    _tabsArray: MatTab[];
     readonly animationDone: EventEmitter<void>;
     animationDuration: string;
     backgroundColor: ThemePalette;