title: Angular Material Stepper error on binding mat-stepper
body: <p>I'm trying to bind parent mat-stepper component to check if selected index is something then do something else. it's work but it gives me errors for each tab that binds. it says that can't find property '0' of undefined. how to handle these errors.</p>
  
  <p>this is my HTML code:</p>
  
  <pre><code>&lt;mat-horizontal-stepper #matStepper (selectionChange)="checkChange($event)" linear&gt;
      &lt;mat-step [label]="tabLabels[0]" state="properties" [completed]="propertiesStepCompleted"&gt;
        &lt;mer-add-product-properties 
  [matStepper]="matStepper"
                                    [productId]="productId"
                                    (idSetter)="setProductId($event)"
                                    (setProduct)="fetchProductProperties($event)"
                                    (setAttributes)="fetchProductAttributes($event)"
                                    #propertiesComponent
                                    (changeCompleted)="changeComplete($event)"&gt;&lt;/mer-add-product-properties&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [label]="tabLabels[1]" state="images"&gt;
        &lt;mer-add-product-images [productId]="productId" 
        *HERE* =&gt; [matStepper]="matStepper"
                                #imageComponent (sendImages)="fetchProductImages($event)"&gt;&lt;/mer-add-product-images&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [label]="tabLabels[2]" state="variants"&gt;
        &lt;mer-add-product-variants #productVariantComponent 
        *AND HERE* =&gt; [matStepper]="matStepper" 
  (sendDetail)="fetchProductDetail($event)"&gt;&lt;/mer-add-product-variants&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [label]="tabLabels[3]" state="overview"&gt;
        &lt;mer-add-product-overview #overviewComponent [product]="product" [attributes]="attributes"
                                  [productImage]="productImages" [productDetails]="productDetails"&gt;&lt;/mer-add-product-overview&gt;
      &lt;/mat-step&gt;
  
      &lt;ng-template matStepperIcon="properties"&gt;
        &lt;mat-icon&gt;ballot&lt;/mat-icon&gt;
      &lt;/ng-template&gt;
      &lt;ng-template matStepperIcon="images"&gt;
        &lt;mat-icon&gt;image&lt;/mat-icon&gt;
      &lt;/ng-template&gt;
      &lt;ng-template matStepperIcon="variants"&gt;
        &lt;mat-icon&gt;view_list&lt;/mat-icon&gt;
      &lt;/ng-template&gt;
      &lt;ng-template matStepperIcon="overview"&gt;
        &lt;mat-icon&gt;visibility&lt;/mat-icon&gt;
      &lt;/ng-template&gt;
    &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>It works but there are 2 errors in the console:</p>
  
  <pre><code>1- ERROR TypeError: Cannot read property '0' of undefined
      at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItem (a11y.es5.js:856)
      at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItemIndex (a11y.es5.js:882)
      at MatStepper.push../node_modules/@angular/cdk/esm5/stepper.es5.js.CdkStepper.ngAfterViewInit (stepper.es5.js:413)
      at callProviderLifecycles (core.js:22317)
      at callElementProvidersLifecycles (core.js:22291)
      at callLifecycleHooksChildrenFirst (core.js:22281)
      at checkAndUpdateView (core.js:23217)
      at callViewAction (core.js:23449)
      at execComponentViewsAction (core.js:23391)
      at checkAndUpdateView (core.js:23214)
  
  2- ERROR TypeError: Cannot read property '0' of undefined
      at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItem (a11y.es5.js:856)
      at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItemIndex (a11y.es5.js:882)
      at MatStepper.push../node_modules/@angular/cdk/esm5/stepper.es5.js.CdkStepper.ngAfterViewInit (stepper.es5.js:413)
      at callProviderLifecycles (core.js:22317)
      at callElementProvidersLifecycles (core.js:22291)
      at callLifecycleHooksChildrenFirst (core.js:22281)
      at checkAndUpdateView (core.js:23217)
      at callViewAction (core.js:23449)
      at execComponentViewsAction (core.js:23391)
      at checkAndUpdateView (core.js:23214)
  </code></pre>
  
  <p>Please guide me on handle these errors. Thanks!</p>