This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on Bootstrap for markup and styling as well as Font Awesome for icons.
npm install @sebgroup/ng-wizard
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StepOneComponent } from './steps/step-one/step-one.component';
import { StepTwoComponent } from './steps/step-two/step-two.component';
@NgModule({
declarations: [AppComponent, StepOneComponent, StepTwoComponent],
imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FontAwesomeModule, SebNgWizardModule.forRoot()],
providers: [WizardSteps],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(library: FaIconLibrary) {
// add icons that should be available in the app/module
}
}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { WizardStep } from '@sebgroup/ng-wizard';
import { StepOneComponent } from './steps/step-one/step-one.component';
import { StepTwoComponent } from './steps/step-two/step-two.component';
const routes: WizardStep[] = [
{
path: '',
redirectTo: 'step-one',
pathMatch: 'full',
},
{
path: 'step-one',
component: StepOneComponent,
data: {
heading: 'Step one',
},
},
{
path: 'step-two',
component: StepTwoComponent,
data: {
heading: 'Step two',
}
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
app.component.ts
<!-- add wizard component and router outlet -->
<wiz-wizard>
<div class="wizard-main">
<!-- this is where your steps will be rendered -->
<router-outlet></router-outlet>
</div>
</wiz-wizard>
For more info and examples please see demo and documentation.
To run this project locally first build the library and watch for changes by running:
npm run build:watch
Then start one of the following demo apps by running either:
npm start
or
npm run start:simple