@valentingavran/ngx-stepper v12.7.2

NgxStepper

An Angular stepper based on RxJS, which provides various events to make development easier. This library has no dependencies.

It includes a ready to use stepper implementation as well as the possibility to create your own stepper using the available services (similar to the Angular Material Stepper).

Table of contents

• Installation
• Usage
• API

Installation

npm install @valentingavran/ngx-stepper

app.module.ts (or any other module)

import { NgxStepperModule } from '@valentingavran/ngx-stepper';

@NgModule({
  // ...
  imports: [
    // ...
    BrowserAnimationsModule, // Required for stepper animations
    NgxStepperModule, // Module that contains the stepper
  ],
})
export class AppModule {
}

Usage

app.component.html

<ngx-stepper #stepper>
  <ng-template ngxStep label="First step">
    First step content
    <button (click)="stepper.next()">Continue</button>
  </ng-template>
  <ng-template ngxStep label="Second step" [valid]="stepValid">
    Valid:<input type="checkbox" [(ngModel)]="stepValid" /><br />
    <button (click)="stepper.previous()">Back</button>
    <button ngxStepperNext>Continue</button>
  </ng-template>
  <ng-template ngxStep label="Third step">
    Third step content
    <button ngxStepperPrevious>Back</button>
    <button ngxStepperNext>Continue</button>
  </ng-template>
</ngx-stepper>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public stepValid = false;
}

API

ngx-stepper

Props

Events

ngxStep

Props

Events

ngxStepperPrevious

This directive can be placed on a button, for example. After a click the stepper automatically goes to the previous step

<ngx-stepper>
  ...
  <ng-template ngxStep label="Step 2">
    Content 2
    <button ngxStepperPrevious>Back</button>
  </ng-template>
</ngx-stepper>

Alternatively you can call the previous method of a stepper reference:

<ngx-stepper #stepper>
  ...
  <ng-template ngxStep label="Step label">
    Content x
    <button (click)="stepper.previous()">Back</button>
  </ng-template>
</ngx-stepper>

In this case you can place the button also outside the stepper.

ngxStepperNext

This directive can be placed on a button, for example. After a click the stepper automatically goes to the next step

<ngx-stepper>
  <ng-template ngxStep label="Step label">
    Content x
    <button ngxStepperNext>Continue</button>
  </ng-template>
  ...
</ngx-stepper>

Alternatively you can call the next method of a stepper reference:

<ngx-stepper #stepper>
  <ng-template ngxStep label="Step label">
    Content x
    <button (click)="stepper.next()">Continze</button>
  </ng-template>
  ...
</ngx-stepper>

In this case you can place the button also outside the stepper.