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
}

License

MIT