Angular Stepper-Komponente | ng-hub-ui-stepper
Angular Stepper-Komponente mit Validierung, Ausrichtungsmodi, individuellen Steuerelementen, i18n und Theming über CSS-Variablen.
Overview
Why teams search for this library
Diese Angular Stepper-Komponente ist nützlich für geführte mehrstufige Flows, in denen Validierung, Fortschrittsregeln und Branding unter deiner Kontrolle bleiben müssen.
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- Checkout-Flows
- Wizard-Formulare
- Onboarding
- Konfigurationsschritte
About stepper
ng-hub-ui-stepper hilft Angular-Anwendungen, Onboarding, Checkout und Wizard-artige Formulare zu strukturieren. Es gibt Teams eine wiederverwendbare Möglichkeit, Schrittfortschritt, Validierung und Navigationslogik zu steuern, ohne diese Regeln in jedem Flow von Hand einzubauen.
Feature guides
Grundnutzung
Grundlegende Einrichtung und Ausrichtungsverhalten.
Examples:
Grundlegende Verwendung
Grundlegende Verwendung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Ausrichtung
Ausrichtung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Erweiterte Abläufe
Validierung, i18n, RTL, API-gesteuerte Navigation, benutzerdefinierte Steuerelemente und benutzerdefinierte Schritt-Header.
Examples:
Validierung
Validierung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Programmatische Steuerung
Programmatische Steuerung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
Benutzerdefinierte Navigation
Benutzerdefinierte Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Benutzerdefinierte Steuerelemente
Benutzerdefinierte Steuerelemente
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Animationen
Animationen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Internationalisierung (i18n)
Internationalisierung (i18n)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Rechts-nach-links (RTL)
Rechts-nach-links (RTL)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Styling
Laufzeit-Theme-Anpassung über den Theme-Service.
Examples:
Theming
Theming
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Key features
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.