@railinc/rl-wizard NPM

rl-wizard

rl-wizard is a multi-setp form component.

Installation

To install this library, run:

$ npm install @railinc/rl-wizard --save

Usage

You can import rl-wizard in any Angular application:

and then from your Angular AppModule or SharedModule:

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

import { AppComponent } from './app.component';
import { RlWizardModule } from '@railinc/rl-wizard';

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

Once your library is imported, you can use it in your Angular application:

  <rl-wizard (onCancel)="cancel()" (onStepChanged)="stepChanged($event)">
    <rl-wizard-step body [title]="'Your Wizard Step Title'" [isValid]="isWizardStepValid">
      <your-component></your-component>
    </rl-wizard-step>
    <button footer type="button" (click)="click()">
      Custom Button
    </button>
  </rl-wizard>

\

The <rl-wizard></rl-wizard> environment is the environment, in which you define your wizard. This environment must contain all steps, that make up your wizard. It's possible to pass the following parameters to a wizard environment:

body and footer

body and footer are attributes that tell rl-wizard where to project the element. If an element has body, it will be placed at the body of rl-wizard. If an element has footer, it will be placed at the footer of rl-wizard.

(onCancel)

onCancel will invoke the callback function when Cancel button is clicked.

(onStepChanged)

onStepChanged will invoke the callback function when the wizard step gets changed by clicking Back Button, Next Button or navigation bar.

\

The <rl-wizard-step></rl-wizard-step> it is the wizard step environment. Every step that belongs to your wizard must be defined inside its own <rl-wizard-step></rl-wizard-step> environment.