Angular Material Stepper error on binding mat-stepper

Question

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.

this is my HTML code:

<mat-horizontal-stepper #matStepper (selectionChange)="checkChange($event)" linear>
    <mat-step [label]="tabLabels[0]" state="properties" [completed]="propertiesStepCompleted">
      <mer-add-product-properties 
[matStepper]="matStepper"
                                  [productId]="productId"
                                  (idSetter)="setProductId($event)"
                                  (setProduct)="fetchProductProperties($event)"
                                  (setAttributes)="fetchProductAttributes($event)"
                                  #propertiesComponent
                                  (changeCompleted)="changeComplete($event)"></mer-add-product-properties>
    </mat-step>
    <mat-step [label]="tabLabels[1]" state="images">
      <mer-add-product-images [productId]="productId" 
      *HERE* => [matStepper]="matStepper"
                              #imageComponent (sendImages)="fetchProductImages($event)"></mer-add-product-images>
    </mat-step>
    <mat-step [label]="tabLabels[2]" state="variants">
      <mer-add-product-variants #productVariantComponent 
      *AND HERE* => [matStepper]="matStepper" 
(sendDetail)="fetchProductDetail($event)"></mer-add-product-variants>
    </mat-step>
    <mat-step [label]="tabLabels[3]" state="overview">
      <mer-add-product-overview #overviewComponent [product]="product" [attributes]="attributes"
                                [productImage]="productImages" [productDetails]="productDetails"></mer-add-product-overview>
    </mat-step>

    <ng-template matStepperIcon="properties">
      <mat-icon>ballot</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="images">
      <mat-icon>image</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="variants">
      <mat-icon>view_list</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="overview">
      <mat-icon>visibility</mat-icon>
    </ng-template>
  </mat-horizontal-stepper>

It works but there are 2 errors in the console:

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)

Please guide me on handle these errors. Thanks!

Nicolas Law-Dune Nicolas Law-Dune · Accepted Answer · 2019-09-12T21:29:50

0

votes

I got the same issue and I upgrade the version of @angular/cdk to resolve it. (7.0.2 => 7.2.1).

Angular Material Stepper error on binding mat-stepper

1 Answers