Overview

| Input | Type | Purpose | | --- | --- | --- | | `active` | `string` | Name of the current step; defaults to the first step. | | `orientation` | `horizontal`, `vertical`, `auto` | Layout direction; `auto` stacks in narrow space. | | `linear` | `boolean` | Require previous steps to be completed before proceeding. | | `clickable` | `boolean` | Allow users to select reachable steps directly. | | `label` | `string` | Accessible label, especially useful with multiple steppers. |

Import

Import the stepper directive from the angular-awesome package:

// Import the stepper directive
import { WaStepperDirective } from 'angular-awesome/stepper';

Examples

Stepper examples

import { Component, ViewChild } from '@angular/core';
import { WaStepDirective, WaStepperDirective } from 'angular-awesome';

@Component({
  standalone: true,
  imports: [WaStepperDirective, WaStepDirective],
  template: `
    <wa-stepper [(active)]="currentStep" orientation="auto" [linear]="true"
      label="Checkout" (waBeforeStepChange)="guardStep($event)">
      <wa-step name="cart" [completed]="cartComplete">Cart</wa-step>
      <wa-step name="shipping">Shipping</wa-step>
      <wa-step name="payment">Payment</wa-step>
    </wa-stepper>
    <button (click)="next()">Next</button>
  `
})
export class CheckoutComponent {
  currentStep = 'cart';
  cartComplete = false;
  @ViewChild(WaStepperDirective) stepper!: WaStepperDirective;
  next(): void { this.stepper.next(); }
  guardStep(event: CustomEvent): void {
    if (!this.cartComplete && event.detail.name === 'shipping') event.preventDefault();
  }
}

API Reference

Styling