https://github.com/seb-oss/ng-wizard
Wizard component built for angular 12+
https://github.com/seb-oss/ng-wizard
angular seb wizard
Last synced: 12 months ago
JSON representation
Wizard component built for angular 12+
- Host: GitHub
- URL: https://github.com/seb-oss/ng-wizard
- Owner: seb-oss
- License: apache-2.0
- Created: 2019-02-27T08:57:33.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:09:25.000Z (over 2 years ago)
- Last Synced: 2025-04-05T07:11:16.593Z (about 1 year ago)
- Topics: angular, seb, wizard
- Language: TypeScript
- Homepage: https://sebgroup.github.io/ng-wizard/
- Size: 10.8 MB
- Stars: 3
- Watchers: 12
- Forks: 8
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @sebgroup/ng-wizard
[](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml)[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
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.
Requirements
-
Angular - This component is built for Angular and tested with version 12+.
-
A route for each step - Each step in the wizard is a route with an optional route guard using
CanActivate (for protected
steps). Step controls are provided using route data objects.
-
Bootstrap - This component relies on styles provided by SEB:s Bootstrap theme:
@sebgroup/bootstrap.
-
Font Awesome - This component uses Font Awesome regular icons (dependency might be removed in a
future release).
## Demo and documentation
[View demo and documentation](https://sebgroup.github.io/ng-wizard/)
## Quick start
### Install
```
npm install @sebgroup/ng-wizard
```
### Import the module.
app.module.ts
```TypeScript
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
}
}
```
### Setup steps as routes
app-routing.module.ts
```TypeScript
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 {}
```
### Add component
app.component.ts
```Html
```
For more info and examples please see [demo and documentation](https://sebgroup.github.io/ng-wizard/).
## Local development
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
```