primeng-extensions-wizard

Custom wizard component implemented with Angular 2+ and PrimeNG

There are two components and which allow to implement a wizard like behavior. The navigation between wizard steps happens by clicking on breadcrumb items, buttons or setting step's index programmatically.

Usage example

import {Component} from '@angular/core';
import {Message} from 'primeng/components/common/api';

@Component({
    selector: 'user-data-wizard',
    templateUrl: `
        <form novalidate="">
            
                
                    <label for="firstname">First Name:</label>
                    <input type="text" name="firstname" id="firstname">
                    <button label="Go"></button>
                
                
                
                    <label for="lastname">Last Name:</label>
                    <input type="text" name="lastname" id="lastname">
                    <button label="Go"></button>
                
                
                
                    <label for="address">Address:</label>
                    <input type="text" name="address" id="address">
                    <button label="Ok"></button>
                
            
            
            
        </form>
    `
})
export class UserDataWizardComponent {
    activeIndex: number = 0;
    firstName: string;
    lastName: string;
    address: string;

    msgs: Message[] = [];

    next() {
        this.activeIndex++;
    }

    ok() {
        this.activeIndex = 0;
    }

    onChange(label: string) {
        this.msgs.length = 0;
        this.msgs.push({severity: 'info', summary: label});
    }
}

API

``

Attributes

Styling

``

Attributes

Events

Installation

Angular 2.x

Run

npm install primeng-extensions-wizard@">=1.0.3 <2.0.0" --save

Angular 4.x

Run

npm install primeng-extensions-wizard --save

Import WizardModule.

import {WizardModule} from 'primeng-extensions-wizard/components/wizard.module';
...

@NgModule({
    imports: [
        ...
        WizardModule
    ],
    ...
})
export class AppModule {
}