1.0.8 • Published 12 months ago
eg-wizard v1.0.8
eg-wizard
A wizard component that can be use in Angular applications.
Getting Started
To add the eg-wizard in your angular application, run the command:
ng add eg-wizard
The command above will add EgWizardModule in your app.module.ts.
Usage
Use the eg-wizard component to define your wizard steps:
<eg-wizard>
<eg-wizard-step
key="step1"
[options]="{ progressBar: { title: 'Step 1', description: 'Registration' } }"
>
<app-step1 *egWizardStep></app-step1>
</eg-wizard-step>
<eg-wizard-step
key="step2"
[options]="{ progressBar: { title: 'Step 2', description: 'OTP' } }"
>
<app-step2 *egWizardStep></app-step2>
</eg-wizard-step>
<eg-wizard-step
key="step3"
[options]="{
progressBar: { title: 'Step 3', description: 'Complete' }
}"
>
<app-step3 *egWizardStep></app-step3>
</eg-wizard-step>
</eg-wizard>Note: Don't forget to add *egWizardStep directive on your components.
To navigate the steps, use the EgWizardService service:
import { EgWizardService } from 'eg-wizard'
export class Step1Component implements OnInit, OnDestroy {
constructor(private egWizardService: EgWizardService) {}
ngOnInit(): void {}
goNext(): void {
// This will go to the next step
this.egWizardService.next()
}
}<div>
<h2>Step 1</h2>
<button (click)="goNext()">Next</button>
</div>If you want to override the eg-wizard default configuration, define a config object and pass it to the eg-wizard component:
const config: EgWizardConfig = {
progressBar: {
description: {
styles: {
color: 'red',
},
},
},
};<eg-wizard [config]="config">
...
</eg-wizard>The sample above will override the color of the description. Check EgWizardConfig properties.
EgWizard
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| config | EgWizardConfig (object) | no | Allows overriding of the default configuration. |
| defaultStep | string | no | Allows setting of the initial step of the wizard. |
EgWizardStep
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| key | string | yes | Use to navigate in every step |
| options | EgWizardStepOptions (object) | no | Allow to configure step |
EgWizardService
| Method | Type | Description |
|---|---|---|
| next | (data?: any) => void | go to the next step If you pass a data, that data will be accessible on the stepChanged method |
| back | () => void | go to the previous step |
| to | (key: string, data?: any) => void | go to the specific step key is required. key is the identifier on every step If you pass a data, that data will be accessible on the stepChanged method |
| stepChanged | () => Observable([StepChanges](#stepchanges-object)) | allow to subscribe on every step changes |
EgWizardConfig object:
{
theme?: THEME;
progressBar?: {
title?: {
styles?: CSS.PropertiesHyphen;
activeStyles?: CSS.PropertiesHyphen;
hidden?: boolean;
};
description?: {
styles?: CSS.PropertiesHyphen;
activeStyles?: CSS.PropertiesHyphen;
hidden?: boolean;
};
line?: {
color?: RGB | RGBA | HEX;
activeColor?: RGB | RGBA | HEX;
};
circle?: {
color?: RGB | RGBA | HEX;
activeColor?: RGB | RGBA | HEX;
};
};
}EgWizardStepOptions object:
{
progressBar?: {
title?: string; // Title of the step
description?: string; // Description of the step
hidden?: boolean; // Show/hide step on the progress bar
};
}EgWizardStep object:
{
key: string;
data?: any;
options?: {
progressBar?: {
title?: string;
description?: string;
hidden?: boolean;
};
};
}StepChanges object:
{
previous: EgWizardStep | null,
current: EgWizardStep
}