Componente Stepper para Angular | ng-hub-ui-stepper
Componente stepper para Angular con validación, orientaciones, controles personalizados, i18n y theming mediante variables CSS.
Visión General
Por qué los equipos buscan esta librería
Este componente stepper para Angular es útil para flujos guiados de varios pasos donde la validación, las reglas de progresión y la marca deben permanecer bajo tu control.
Instalación
npm install ng-hub-ui-stepperIr a
Ideal para
- flujos de checkout
- formularios wizard
- onboarding
- pasos de configuración
Sobre stepper
ng-hub-ui-stepper ayuda a las aplicaciones Angular a estructurar onboarding, checkout y formularios tipo wizard. Ofrece a los equipos una forma reutilizable de controlar la progresión entre pasos, la validación y la lógica de navegación sin incrustar esas reglas manualmente en cada flujo.
Guías de uso
Uso principal
Basic setup and orientation behavior.
Ejemplos:
Basic Usage
Basic Usage
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Orientation
Orientation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Advanced Flows
Validation, i18n, RTL, API-driven navigation, custom controls and custom step headers.
Ejemplos:
Validation
Validation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Programmatic Control
Programmatic Control
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Custom Navigation
Custom Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Custom Controls
Custom Controls
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Animations
Animations
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Internacionalización (i18n)
Internacionalización (i18n)
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Right-to-Left (RTL)
Right-to-Left (RTL)
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Styling
Runtime theme customization through the theme service.
Ejemplos:
Theming
Theming
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Características clave
Flujos guiados de varios pasos
Útil para wizards, onboarding y procesos secuenciales que necesitan guiar al usuario.
Progresión con validación
Controla cuándo puede avanzar el usuario y refleja claramente el estado de cada paso.
Encaja en flujos de producto personalizados
Adapta controles, etiquetas y visuales a tu propio lenguaje de diseño en lugar de aceptar un wizard genérico.
Cambios recientes
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.