ngvx-stepper

Stepper

This library was generated with Angular CLI version 16.2.0.

This library is created for stpper form with steps.

This Provide a steps with next previous and submit functionality.

How to use

- import StepperModule from stepper.

• use <ui-stepper> component as wrapper of steps

component.html

	<ui-stepper [customStyle]="myStyle">
	</ui-stepper>

component.ts

import { CountWidgetStyles } from 'stepper';
export class {
    public myStyle:CountWidgetStyles = {
        colors: {
                default:  '#008dff',	
                background:  '#e9ecef',	
                active:  '#3bcb44',
                activeBg:  '#e9ecef',
                completed:  '#ffffff',
                completedBg:  '#008DFF'
                },
        shape:  'circle',
        orientation:  'horizontal'
        }
    }
}

Name	Type	Description
default	string	default color of step
background	string	default background color of step
active	string	active state step color
activeBg	string	active state background step color
complted	string	completed state step color
completedBg	string	completed state step background color
shape	Shape : circle ,square	shape of step
orientation	Orientation : horizontal , vertical	orientation

• use <ui-step> selector for your content as wrapper.

<ui-stepper [customStyle]="myStyle">
    <ui-step countTitle="Basic Details">
        <header> <h3>Write your title e.g.Basic Details </h3></header>
        <app-your-form-selecter #formSelector></app-your-form-selecter>
    </ui-step>
</ui-stpper>

Note - Please use #formSelector on form slector component

• Implement StpperForm Interface in yout form componet that you are using as slector.

app-your-form.ts

import { StepperForm } from 'stepper'
export class AppYourForm implements StepperForm    {
    public submitForm():void {
    //trigger this when next, previous or submit click
    }
    public getFormData:FormGroup<any> {
    //your from group instance 
        return this.myFrom
    }
}