Package Exports

angular-ng-stepper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-ng-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Stepper

See Demo or try in Stackblitz

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. You can refer for the full API documentation here.

Support Angular ng-stepper!

If you do love angular-ng-stepper I would appreciate a donation :)

Author

Giorgi Merabishvili

License

MIT

angular-ng-stepper