ng-wizard

ng-wizard is a stepper / wizard component that you can use in your Angular applications. You can access the sample demo project by clicking here.

Screenshots

Dependencies

• Bootstrap 4

Getting started

Install ng-wizard through npm:

$ npm install --save ng-wizard

Include bootstrap CSS file (skip if already imported):

@import '~bootstrap/dist/css/bootstrap.min.css';

Include ng-wizard CSS files:

/* Mandatory */
@import '~ng-wizard/themes/ng_wizard.min.css';
 
/* Optional */
/* If a theme other than default is used, the css file for that theme is required. */
@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';

Import the ng-wizard module into your apps module:

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 { }

Add an ng-wizard component to the html template of your 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>
 
<ng-wizard-step [title]="'Step 4'" [description]="'Step 4 description'">
    <span>Step 4 content</span>
  </ng-wizard-step>
 
  <ng-wizard-step [title]="'Step 5'" [description]="'Step 5 description'" [state]="stepStates.hidden">
    <span>Step 5 content</span>
  </ng-wizard-step>
  
  <ng-wizard-step [title]="'Step 6'" [description]="'Step 6 description'" [state]="stepStates.error">
    <span>Step 6 content</span>
  </ng-wizard-step>
  
  <ng-wizard-step [title]="'Step 7'" [description]="'Step 7 description'">
    <span>Step 7 content</span>
  </ng-wizard-step>
</ng-wizard>

[config] is an optional parameter for ng-wizard component.

If you want to override ng-wizard default configuration defined in apps module for a specific component, define [config] parameter in your ***.component.ts file.

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { NgWizardConfig, NgWizardService, StepChangedArgs, StepValidationArgs, STEP_STATE, THEME } from 'ng-wizard';
 
@Component({
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
  stepStates = {
    normal: STEP_STATE.normal,
    disabled: STEP_STATE.disabled,
    error: STEP_STATE.error,
    hidden: STEP_STATE.hidden
  };
 
  config: NgWizardConfig = {
    selected: 0,
    theme: THEME.arrows,
    toolbarSettings: {
      toolbarExtraButtons: [
        { text: 'Finish', class: 'btn btn-info', event: () => { alert("Finished!!!"); } }
      ],
    }
  };
 
  constructor(private ngWizardService: NgWizardService) {
  }
 
  ngOnInit() {
  }
 
  showPreviousStep(event?: Event) {
    this.ngWizardService.previous();
  }
 
  showNextStep(event?: Event) {
    this.ngWizardService.next();
  }
 
  resetWizard(event?: Event) {
    this.ngWizardService.reset();
  }
 
  setTheme(theme: THEME) {
    this.ngWizardService.theme(theme);
  }
 
  stepChanged(args: StepChangedArgs) {
    console.log(args.step);
  }
 
  isValidTypeBoolean: boolean = true;
 
  isValidFunctionReturnsBoolean(args: StepValidationArgs) {
    return true;
  }
 
  isValidFunctionReturnsObservable(args: StepValidationArgs) {
    return of(true);
  }
}
 

Configuration

NgWizardStep parameters:

Input parameters:

Name	Type	Default Value	Description
title	string		Step title
description	string		Step description
state	STEP_STATE	STEP_STATE.normal	Step State (normal, disabled, error, hidden)
component	Component		A component can be defined for step content.
canExit	boolean | ((args: StepValidationArgs) => boolean) | ((args: StepValidationArgs) => Observable<boolean>)		Validation for transition from step
canEnter	boolean | ((args: StepValidationArgs) => boolean) | ((args: StepValidationArgs) => Observable<boolean>)		Validation for transition to step

Output parameters:

Name	Type	Default Value	Description
index	number		Step Index
status	STEP_STATUS		Step Status (untouched, done, active)
initialStatus	STEP_STATUS		Initial Step Status (untouched, done, active)
initialState	STEP_STATE		Step State (normal, disabled, error, hidden)
componentRef	ComponentRef		If the component input parameter is given, it is used to access the instance of this component.

NgWizardConfig properties:

Name	Type	Default Value	Description
selected	number	0	Initial selected step
keyNavigation	boolean	true	Enable/Disable keyboard navigation (left and right keys are used if enabled)
cycleSteps	boolean	false	Allows to cycle the navigation of steps
lang	{ next: string, previous: string }	{ next: 'Next', previous: 'Previous' }	Language variables for buttons
toolbarSettings	ToolbarSettings	{ toolbarPosition: TOOLBAR_POSITION.bottom, toolbarButtonPosition: TOOLBAR_BUTTON_POSITION.end, showNextButton: true, showPreviousButton: true, toolbarExtraButtons: [] }	Toolbar settings
anchorSettings	AnchorSettings	{ anchorClickable: true, enableAllAnchors: false, markDoneStep: true, markAllPreviousStepsAsDone: true, removeDoneStepOnNavigateBack: false, enableAnchorOnDoneStep: true }	Anchor settings
theme	THEME	THEME.default	Wizard theme (default, arrows, circles, dots)

ToolbarSettings properties:

Name	Type	Default Value	Description
toolbarPosition	TOOLBAR_POSITION	TOOLBAR_POSITION.bottom	Toolbar position (none, top, bottom, both)
toolbarButtonPosition	TOOLBAR_BUTTON_POSITION	TOOLBAR_BUTTON_POSITION.end	Toolbar button position (start, end)
showNextButton	boolean	true	show/hide Next button
showPreviousButton	boolean	true	show/hide Previous button
toolbarExtraButtons	ToolbarButton[]	[]	Extra buttons to show on toolbar, array of input/buttons elements

AnchorSettings properties:

Name	Type	Default Value	Description
anchorClickable	boolean	true	Enable/Disable anchor navigation
enableAllAnchors	boolean	false	Activates all anchors clickable all times
markDoneStep	boolean	true	Add done css
markAllPreviousStepsAsDone	boolean	true	When a step selected, all previous steps are marked done
removeDoneStepOnNavigateBack	boolean	false	While navigate back done step after active step will be cleared
enableAnchorOnDoneStep	boolean[]	true	Enable/Disable the done steps navigation

Thanks

This component was created by rewriting the jQuery Smart Wizard 4 in Angular. Thanks to TechLaboratory for .Css files.

License

MIT License