Angular Stepper
- See Demo or try in Stackblitz
Table of contents
Description
The ng-stepper is a simple wizard/stepper component for Angular which is built on top of Angular CDK Stepper.
Getting started
Step 1: Install @angular/cdk:
Step 2: Install angular-ng-stepper:
NPM
npm i @angular/cdk
npm i angular-ng-stepperStep 3: Import the CdkStepperModule:
Step 4: Import the NgStepperModule:
import {CdkStepperModule} from '@angular/cdk/stepper';
import {NgStepperModule} from 'ng-stepper';
@NgModule({
declarations: [AppComponent],
imports: [CdkStepperModule,NgStepperModule],
bootstrap: [AppComponent]
})
export class AppModule {}Usage sample
<ng-stepper #cdkStepper [linear]="true">
<cdk-step [stepControl]="stepOne.stepOneForm" [optional]="false">
<ng-template cdkStepLabel>
<div class="step-bullet">1</div>
<div class="step-title">Personal Details <span class="required">*</span></div>
</ng-template>
<app-step-one #stepOne></app-step-one>
</cdk-step>
<cdk-step [stepControl]="stepTwo.stepTwoForm" [optional]="true">
<ng-template cdkStepLabel>
<div class="step-bullet">2</div>
<div class="step-title">Address</div>
</ng-template>
<app-step-two #stepTwo></app-step-two>
</cdk-step>
</ng-stepper>API
Angular-ng-stepper uses Angular CDK API. For the full documentation you can refer to here
Support Angular ng-stepper!
If you do love angular-ng-stepper I would appreciate a donation :)
Author
License
MIT