Angular Stepper Component | ng-hub-ui-stepper

Angular stepper component with validation, orientation modes, custom controls, i18n and CSS-variable theming.

Overview

Why teams search for this library

This Angular stepper component is useful for guided multi-step flows where validation, progression rules and branding need to stay under your control.

Install

npm install ng-hub-ui-stepper

Jump to

Ideal for

  • checkout flows
  • wizard forms
  • onboarding
  • configuration steps

About stepper

ng-hub-ui-stepper helps Angular applications structure onboarding, checkout and wizard-like forms. It gives teams a reusable way to control step progression, validation and navigation logic without baking those rules into each flow by hand.

Feature guides

Core Usage

Basic setup and orientation behavior.

Examples:
Basic Usage

Basic Usage

Live preview is not available for this example yet.

Code
Orientation

Orientation

Live preview is not available for this example yet.

Code

Advanced Flows

Validation, i18n, RTL, API-driven navigation, custom controls and custom step headers.

Examples:
Validation

Validation

Live preview is not available for this example yet.

Code
Programmatic Control

Programmatic Control

Live preview is not available for this example yet.

Code
Custom Navigation

Custom Navigation

Live preview is not available for this example yet.

Code
Custom Controls

Custom Controls

Live preview is not available for this example yet.

Code
Animations

Animations

Live preview is not available for this example yet.

Code
Internationalization (i18n)

Internationalization (i18n)

Live preview is not available for this example yet.

Code
Right-to-Left (RTL)

Right-to-Left (RTL)

Live preview is not available for this example yet.

Code

Styling

Runtime theme customization through the theme service.

Examples:
Theming

Theming

Live preview is not available for this example yet.

Code

Key features

Guided multi-step flows

Useful for wizards, onboarding and sequential processes that need user guidance.

Validation-aware progression

Control when users can move forward and reflect state changes clearly across steps.

Fits branded product flows

Adapt controls, labels and visuals to your own design language instead of accepting default wizard UI.

Recent changes

Version 21.2.0 - 3/19/26, 12:00 AM

added: StepperAnimationDirection enum exported for typed animation direction values.

added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.

changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.

changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.

changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.

changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.

removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.

removed: [index] template binding removed from StepComponent — managed internally.

Version 21.1.0 - 3/18/26, 12:00 AM

added: Angular 21 support with Signals-based architecture.

added: contentChild and contentChildren for step and directive discovery.

changed: All components and directives converted to standalone.

fixed: Fixed step indices and validation during dynamic step additions.

Related libraries

ng-hub-ui-accordion ng-hub-ui-modal ng-hub-ui-utils