Customizable Stepper/Wizard Component For Angular

Description:

A customizable and themeable stepper & wizard component for Angular powered apps.

How to use it:

1. Install the package.

# NPM
$ npm i ng-wizard

2. Import the component.

import { NgModule } from '@angular/core';
import { NgWizardModule, NgWizardConfig, THEME } from 'ng-wizard';
const ngWizardConfig: NgWizardConfig = {
  theme: THEME.default
};
@NgModule({
  imports: [
    NgWizardModule.forRoot(ngWizardConfig)
  ]
})
export class AppModule { }

3. Import necessary CSS files and optional themes.

/* Core */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~ng-wizard/themes/ng_wizard.min.css';

/* Themes */
@import '~ng-wizard/themes/ng_wizard_theme_arrows.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_circles.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_dots.min.css';

4. Add steps to the wizard component.

<ng-wizard [config]="config" (stepChanged)="stepChanged($event)">
  <ng-wizard-step [title]="'Step 1'" [description]="'Step 1 description'"
    [canEnter]="isValidTypeBoolean" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 1 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 2'" [description]="'Step 2 description'" [state]="stepStates.disabled">
    <span>Step 2 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 3'" [description]="'Step 3 description'"
    [canEnter]="isValidFunctionReturnsObservable.bind(this)" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 3 content</span>
  </ng-wizard-step>
  // more steps here
</ng-wizard>

Preview: