Hello, I'm using version 13.1. How would it be possible to use the KTStepper that is provided by Metronic in Angular? Styles seem to be partly included, but not all them, same goes with type KTStepper, which does not seem to exist OOB.
Implementation as shown here: https://preview.keenthemes.com/html/metronic/docs/general/stepper mentions events that I can not listen to. Would you happen to have any leads?
2 Answer(s)
-
0
Hi Hammer
Here the answer (https://devs.keenthemes.com/question/how-to-use-steppercomponent-in-angular) generated by metronic will help you.
-
0
For the record, the link provides a very partial solution. Here is a complete one:
export class SomeComponent extends AppComponentBase {
private stepper: any;
constructor(
injector: Injector,
) {
super(injector);
}
ngAfterViewInit() {
// Make sure KTStepper is accessible
const KTStepper = (window as any).KTStepper;
if (KTStepper) {
const stepperElement = document.getElementById('kt_stepper_example_basic');
if (stepperElement) {
this.stepper = new KTStepper(stepperElement);
document.getElementById('kt_stepper_next')?.addEventListener('click', () => {
this.stepper.goNext();
});
document.getElementById('kt_stepper_prev')?.addEventListener('click', () => {
this.stepper.goPrevious();
});
document.getElementById('kt_stepper_submit')?.addEventListener('click', () => {
this.stepper.submit();
});
this.stepper.on('kt.stepper.changed', (stepper) => {
const currentStepIndex = stepper.getCurrentStepIndex();
this.handleStepChange(currentStepIndex);
});
}
}