A Simple Wizard/stepper Component for Angular 7+

angular-ng-material-stepper

The NgWizard component is a simple wizard/stepper component of Angular 9 using the Angular Navigation directive.

ng wizard example, ng wizard step, angular wizard example, angular stepper, ng wizard stackblitz, angular material stepper, angular material stepper dynamic steps

How to make use of it:

Installation:

# NPM
$ npm install @cmdap/ng-wizard --save
import { NgWizardComponent } from '@cmdap/ng-wizard';

1. In your app.module.ts add a NgWizardModule to your import collection.

import { NgWizardModule } from '@cmdap/ng-wizard';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    NgWizardModule,
  ],
  providers: [...],
  bootstrap: [...]
})

2. Then add a path for NgWizardComponent to your Angular router config with each step in the wizard as a subpath.

import { NgWizardComponent } from '@cmdap/ng-wizard';

const routes: Routes = [
  { path: '', component: NgWizardComponent, children: [
      { path: 'step-1', component: Step1Component },
      { path: 'step-2', component: Step2Component },
      { path: '**', redirectTo: 'step-1' },
  ], data: { name: 'myWizard' }},
  { path: '**', redirectTo: '' },
];

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

3. Finally, have your step components extend the NgWizardStep class or implement the NgWizardStepInterface.

import { Component } from '@angular/core';
import { NgWizardStep } from '@cmdap/ng-wizard';

@Component({
  selector: 'app-step1',
  templateUrl: './step1.component.html',
})
export class Step1Component extends NgWizardStep {
  constructor() {
    super();
  }
}

Simple Configurable Wizard/Stepper Component, NgWizard Plugin/Github


See Demo And Download

Official Website(cmdap): Click Here

This superior jQuery/javascript plugin is developed by cmdap. For extra Advanced Usages, please go to the official website.