seb-oss / ng-wizard

Wizard component built for angular 12+

@sebgroup/ng-wizard

This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on Bootstrap for markup and styling as well as Font Awesome for icons.

Requirements

• Angular - This component is built for Angular and tested with version 12+.
• A route for each step - Each step in the wizard is a route with an optional route guard using CanActivate (for protected steps). Step controls are provided using route data objects.
• Bootstrap - This component relies on styles provided by SEB:s Bootstrap theme: @sebgroup/bootstrap.
• Font Awesome - This component uses Font Awesome regular icons (dependency might be removed in a future release).
  Note that you need to have a pro license for Font Awesome or use SEB:s internal npm registry to install this package.

Demo and documentation

View demo and documentation

Quick start

Install

npm install @sebgroup/ng-wizard

Import the module.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StepOneComponent } from './steps/step-one/step-one.component';
import { StepTwoComponent } from './steps/step-two/step-two.component';

@NgModule({
  declarations: [AppComponent, StepOneComponent, StepTwoComponent],
  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FontAwesomeModule, SebNgWizardModule.forRoot()],
  providers: [WizardSteps],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // add icons that should be available in the app/module
  }
}

Setup steps as routes

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { WizardStep } from '@sebgroup/ng-wizard';
import { StepOneComponent } from './steps/step-one/step-one.component';
import { StepTwoComponent } from './steps/step-two/step-two.component';

const routes: WizardStep[] = [
  {
    path: '',
    redirectTo: 'step-one',
    pathMatch: 'full',
  },
  {
    path: 'step-one',
    component: StepOneComponent,
    data: {
      heading: 'Step one',
    },
  },
  {
    path: 'step-two',
    component: StepTwoComponent,
    data: {
      heading: 'Step two',
    }
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Add component

app.component.ts

<!-- add wizard component and router outlet -->
<wiz-wizard>
  <div class="wizard-main">
    <!-- this is where your steps will be rendered -->
    <router-outlet></router-outlet>
  </div>
</wiz-wizard>

For more info and examples please see demo and documentation.

Local development

To run this project locally first build the library and watch for changes by running:

npm run build:watch

Then start one of the following demo apps by running either:

npm start

or

npm run start:simple