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.