rl-wizard is a multi-setp form component.
npm install @railinc/rl-wizardTo install this library, run:
``bash`
$ npm install @railinc/rl-wizard --save
You can import rl-wizard in any Angular application:
and then from your Angular AppModule or SharedModule:
`typescript
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:
`html`
The 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 it is the wizard step environment. Every step that belongs to your wizard must be defined inside its own 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
To generate all .js, .js.map and *.d.ts files:
`bash`
$ npm run tsc
To lint all *.ts files:
`bash``
$ npm run lint
MIT © Bruce Gong