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.

> Compatibility: This version of ng-wizard is compatible with Angular 19 and later versions. Ensure your project uses Angular >= 19.0.0.

Screenshots

!Default

!Arrows

!Circles

!Dots

Dependencies

- Bootstrap 5

Getting started

Install ng-wizard through npm:

``
$ npm install --save ng-wizard
`

Include bootstrap CSS file (skip if already imported):

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

Include ng-wizard CSS files:

`css
/ 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:

`typescript
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:

`html


Step 1 content



Step 2 content



Step 3 content



Step 4 content



Step 5 content



Step 6 content



Step 7 content


`

[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.

`typescript
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

$3

#### 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 \| Observable) | | Validation for transition from step |
| canEnter | boolean \| ((args: StepValidationArgs) => boolean \| Observable) | | 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. |

$3

| 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) |

$3

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

$3

| 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