Angular Form Wizard

A minimal customizable angular library for generating n-step form wizard.

Key Features • Installation • How To Use • Demo • Support • License

Key Features

• N-step Configuration Support
• Dynamic Component creation of steps
• Step Level Data Validation
• Step Level Data Caching
• Default stepper layout
• Custom stepper support using content projection
• Available stepper positions - top and right
• Navigation support in stepper

Installation

npm i ngx-form-wizard

How To Use

First, import the FormWizardModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { FormWizardModule } from 'ngx-form-wizard';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormWizardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then use the FormWizardComponent in your HTML like below:

<ngx-form-wizard
  [steps]="steps"
  [stepperOptions]="stepperOptions"
  (finished)="onFinish()"
  (cancelled)="onCancel()">
</ngx-form-wizard>

And declare the steps and stepper options in your components like:

import { Component } from '@angular/core';
import { IStepperOptions, IWizardStep, FormWizardService } from 'ngx-form-wizard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  steps: IWizardStep[] = [
    {
      id: 1,
      title: 'Personal Info',
      description: 'Personal Description',
      data: null,
      component: Step1Component
    },
    {
      id: 2,
      title: 'Education',
      description: 'Eduction Description',
      data: null,
      component: Step2Component
    },
    {
      id: 3,
      title: 'Work Experience',
      description: 'Work Description',
      data: null,
      component: Step3Component
    },
    {
      id: 4,
      title: 'Review',
      description: 'Review Description',
      data: null,
      component: Step4Component
    }
  ];

  stepperOptions: IStepperOptions = {
    custom: true,
    position: 'right'
  };

  constructor(private wizardService: FormWizardService) {}

  onFinish(): void {
    alert('Wizard Finished!!');
  }

  onCancel(): void {
    alert('Wizard Cancelled!!');
  } 
}

Demo

Checkout how it works in Stackblitz

Support

License

MIT