Topic: stepper component not working

INKOOM free asked 1 year ago


Hi,

Trying to use stepper and I'm getting the following error on the browser console. Anything I'm doing wrong? below is the error:

ERROR TypeError: Cannot set properties of undefined (setting 'isActive') at MdbStepperComponent._setActiveStep (mdb-angular-ui-kit-stepper.mjs:352:9) at MdbStepperComponent.ngAfterContentInit (mdb-angular-ui-kit-stepper.mjs:371:14) at callHook (core.mjs:2526:1) at callHooks (core.mjs:2495:1) at executeInitAndCheckHooks (core.mjs:2446:1) at refreshView (core.mjs:9510:1) at refreshComponent (core.mjs:10640:1) at refreshChildComponents (core.mjs:9265:1) at refreshView (core.mjs:9519:1) at refreshEmbeddedViews (core.mjs:10594:1)

HTml Code is as follows:

<mdb-stepper [orientation]="'vertical'">
    <mdb-step *ngFor="let bdata of bulkCustomerData" [name]="bdata.formData.customerName" [editable]="false">
      {{bdata.formData.customerName}}
    </mdb-step>
  </mdb-stepper>

TS Code is as follows:

import { Component, OnInit } from '@angular/core';
import { BusinessService } from '../business.service';
import { BulkCustomerData } from '../models/data-models';

@Component({ 
        selector: 'app-stepper', 
        templateUrl: './stepper.component.html', 
        styleUrls: ['./stepper.component.scss']
})

export class StepperComponent implements OnInit {

    bulkCustomerData: BulkCustomerData[] | undefined;

    constructor( 
        private business: BusinessService 
    ) { 
        this.getCustomerData(); 
}

    ngOnInit(): void {

    }

getCustomerData(): void{ this.business.getCustomerData().subscribe((data) => {         this.bulkCustomerData = data; 
}) 
}

    }

Arkadiusz Idzikowski staff commented 1 year ago

Could you please edit your post and provide the HTML/TS code that you used? It would help us to reproduce the problem on our end.


Arkadiusz Idzikowski staff commented 1 year ago

Thank you for the code. I think the problem may be caused by the async init of the mdb-step components. Can you try to add *ngIf directive to the mdb-stepper and display the component when the customer data is loaded?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: Laptop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No