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>

<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.

<rl-wizard-step>

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.

[title]

A wizard step must contain a title, which is shown in the navigation bar of the wizard. The title of a step can be set by adding a title attribute to the step definition.

[isValid]

isValid will take a boolean value to enable/disable the next button.

[forceEnabled]

forceEnabled will force the tab to be enabled.

(onComplete)

onComplete will invoke the callback function when the Finish button is clicked. It should be placed at the last <rl-wizard-step>

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Bruce Gong