Composant Stepper Angular | ng-hub-ui-stepper
Composant stepper Angular avec validation, modes d'orientation, contrôles personnalisés, i18n et theming via variables CSS.
Overview
Why teams search for this library
Ce composant stepper Angular est utile pour les flux guidés en plusieurs étapes où la validation, les règles de progression et la marque doivent rester sous votre contrôle.
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- flux de paiement
- formulaires wizard
- onboarding
- étapes de configuration
About stepper
ng-hub-ui-stepper aide les applications Angular à structurer l'onboarding, le paiement et les formulaires de type wizard. Il offre aux équipes une manière réutilisable de contrôler la progression entre les étapes, la validation et la logique de navigation sans intégrer ces règles à la main dans chaque flux.
Feature guides
Utilisation principale
Configuration de base et comportement d'orientation.
Examples:
Utilisation de base
Utilisation de base
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.
Orientation
Orientation
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.
Flux avancés
Validation, i18n, RTL, navigation pilotée par API, contrôles personnalisés et en-têtes d'étape personnalisés.
Examples:
Validation
Validation
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.
Contrôle programmatique
Contrôle programmatique
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: -
Navigation personnalisée
Navigation personnalisée
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.
Contrôles personnalisés
Contrôles personnalisés
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.
Animations
Animations
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.
Internationalisation (i18n)
Internationalisation (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.
De droite à gauche (RTL)
De droite à gauche (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.
Style
Personnalisation du thème à l'exécution via le service de thème.
Examples:
Thématisation
Thématisation
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.