@rolesvillesoftware/ng-wizard v1.2.11
Rolesville Software LLC - NgWizard
NgWizard is a simple step wizard for Angular. This is a very simple wizard at the moment was was written for a specific reason. I would like to expand it, but would also like for others to identify functionality they need in their current projects.
Installation
npm install --save @rolesvillesoftware/ng-wizard
Module Configuration
To use the NgWizard, its module needs to be imported into your application module.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgWizardModule } from '@rolesvillesoftware/ng-wizard/NgWizardModule';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgWizardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Simple Sample Application
app.component.ts
import {Component} from '@angular/core';
import {NgWizardStepEvent} from '@rolesvillesoftware/ng-wizard/NgWizardStepEvent';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
textValue: string = null;
onDone(event: NgWizardStepEvent) {
alert('Wizard Completed');
}
onStepChange(event: NgWizardStepEvent) {
alert(`Step Change - Previous Step: ${event.previousStep} \- Current Step: ${event.currentStep}`)
}
}
app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<ngWizard (done)="onDone($event)" (stepChange)="onStepChange($event)" [doneText]="'Complete Wizard'" [backText]="'< Previous'" [nextText]="'Next >'">
<ngWizardStep [title]="'Step One'">
<p>Step one - Click Next</p>
</ngWizardStep>
<ngWizardStep [title]="'Step Two'" [canMoveBack]="(textValue || '').length === 0" [canMoveNext]="textValue?.length > 0" >
<p>Step Two - Enter Value in Text Box to Move Next</p>
<p>
<input type="text" [(ngModel)]="textValue" />
</p>
</ngWizardStep>
<ngWizardStep [title]="'Step Three / Final'">
<p>Validate Value from Text Box: {{ textValue }}</p>
</ngWizardStep>
</ngWizard>
Components
ngWizard
This is the main container for the wizard.
Selector: <ngWizard></ngWizard>
Parameter | In/Out | Type | Description |
---|---|---|---|
nextText | IN | string | Text to display on the button to step to the next wizard step. (Default: Next) |
doneText | IN | string | Text to display on the button on last wizard step to complete the wizard. (Default: Done) |
backText | IN | string | Text to display on the back button. (Default: Back) |
stepChange | OUT | NgWizardStepEvent | Event that is signaled when the wizard changes active step (EventEmitter) |
done | OUT | NgtWizardStepEvent | Event that is signaled with the "done" button is pressed on the last step pane. (EventEmitter) |
ngWizardStep
Selector:<ngWizardStep></ngWizardStep>
Container to house the step controls and HTML.
Parameter | In/Out | Type | Description |
---|---|---|---|
title | IN | string | The title of the step displayed on the header region (Default: Null) |
canMoveNext | IN | boolean | Flag to indicate if the "next" button can be enabled. (Default: true) |
canMoveBack | IN | boolean | Flag to indicate if the "back" button can be enabled. (Default: true) |
CSS Controls/Override
Default CSS
Below is the default CSS settings of the wizard. They can be overriden by adding the following class in your CSS: rsWizardMainOverride
.
@import url("https://fonts.googleapis.com/css?family=Lato");
.rsWizardMain { display: flex; flex-direction: column; font-family: "Lato", sans-serif; background: #fff; font-size: 1em; border: 1px solid #C7CDD1; box-shadow: 0 1px 3px 0 rgba(0 0 0 0.15); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 41%; max-height: 65%; min-width: 41%; max-width: 65% }
.rsWizardMain>div { flex: 1; overflow: hidden; overflow-y: auto; }
.rsWizardMain>div:first-child { flex: 0; font-size: 20px; padding: 3.99vh 3.18vw; color: #2D3B45; font-weight: bold; background: #f2f2f2; border: 1px solid #C7CDD1; border-radius: 3px 3px 0 0; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15); }
.rsWizardMain>div:first-child>div { width: 50%; }
.rsWizardMain>div:last-child { flex: 0; padding: 3.42vh 3.36vw; border-top: 1px solid #efefef; }
.rsWizardMain>div:last-child>div { display: inline-block; width: 50%; text-align: center }
.rsWizardMain>div:last-child>div:first-child { text-align: left;}
.rsWizardMain>div:last-child>div:last-child { text-align: right; }
.rsWizardMain button { font-family: "Lato", sans-serif; font-size: 14px; line-height: 17px; border: 1px solid #C4CDD1; border-radius: 2px; background-color: #F5F5F5; color: #2D3B45; padding: 7px 17px; cursor: pointer; }
.rsWizardMain button.next { background-color: #00ACBD; color: #fff; border-color: #008592; }
.rsWizardMain button:disabled { cursor: not-allowed; opacity: 0.45; }
Written with StackEdit.
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago