Topic: stepper component not working
INKOOM free asked 2 years 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;
})
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: 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
Arkadiusz Idzikowski staff commented 2 years 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 2 years 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 themdb-stepper
and display the component when the customer data is loaded?