Angular Stepper

• See Demo or try in Stackblitz

Table of contents

• Description
• Getting started
• Usage
• API

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-stepper

Step 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

• Giorgi Merabishvili

License

MIT