ngx-tonysamperi/dyna-stepper

Create a stepper in seconds, using just route data. Manage one component for each step so you don't mix up logics. Use the provided solutions to pass data from one component to another.

Manipulate all the way by replacing steps at runtime, using observables or signals.

Installation

npm i @ngx-tonysamperi/dyna-stepper

Usage

Configure the stepper data in your route data, or injecting a specific instance of SmpDynaStepperService

In this example we use a subject to configure steps dynamically. The stepper will update consequently.

const routes = [
    // ... some routes
    {
        path: SmpRouteKeys.dynaStepper,
        component: MyViewComponent,
        data: {
            ...MyViewComponent.STEPPER_CONFIG$
        }
    },
    // ... other routes
];

MyViewComponent

class MyViewComponent {

    static get STEPPER_CONFIG$(): SmpDynaStepperConfig {
        return {
            steps: this._stepperSteps$.asObservable()
        };
    }

    private static _stepperSteps$ = new BehaviorSubject<SmpDynaStepperStep[]>([
        {
            component: SmpStepAComponent,
            id: "step-a"
        },
        {
            component: SmpStepBComponent,
            id: "step-b"
        }
    ]);
}

Render the stepper in your view

<smp-dyna-stepper></smp-dyna-stepper>

Use events optionally

Creating an instance of SmpDynaStepperEventBus you can manage events to manipulate your steppers.

Author

Tony Samperi.

Licence

SEE LICENCE FILE