Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

KTStepper #12139


User avatar
0
Hammer created

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)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi Hammer

    Here the answer (https://devs.keenthemes.com/question/how-to-use-steppercomponent-in-angular) generated by metronic will help you.

  • User Avatar
    0
    Hammer created

    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);                 });             }             }