Description

Wizard component for Angular.

NPM

Install archwizard using npm

Archwizard

npm install --save angular-archwizard

Dependencies

No Dependencies for this module.

Forms Module

Add ArchwizardModule into your FormsModule class. FormModule would look like this

    
    import {NgModule} from '@angular/core';
    import { ArchwizardModule } from 'angular-archwizard';
    import { ArchwizardComponent } from './archwizard/archwizard.component';

    @NgModule({
    imports: [ArchwizardModule],
    declarations: [ArchwizardComponent]
    })
    export class FormsModule { }

Archwizard Markup

archwizard.component.html would look like this 

    

             <aw-wizard>
                     <aw-wizard-step stepTitle="Title of step 1">
                      Content of Step 1
                       <button type="button" awNextStep>Next Step </button>
                       <button type="button" [awGoToStep]="{stepIndex: 2}">Go directly to third Step </button>
                     </aw-wizard-step>
                     <aw-wizard-step stepTitle="Title of step 2" awOptionalStep>
                      Content of Step 2
                       <button type="button" awPreviousStep>Go to previous step </button>
                       <button type="button" awNextStep>Go to next step </button>
                     </aw-wizard-step>
                     <aw-wizard-step stepTitle="Title of step 3">
                      Content of Step 3
                       <button type="button" awPreviousStep>Previous Step </button>
                       <button type="button" (click)="finishFunction()">Finish </button>
                     </aw-wizard-step>
                   </aw-wizard>