Angular Stepper Component | ng-hub-ui-stepper
Angular stepper component with validation, orientation modes, custom controls, i18n and CSS-variable theming.
Interactive examples
Explore live examples that show how the library behaves in common Angular use cases.
Basic Usage
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.
Inside a Modal
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.
Programmatic Control
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: -
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.
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.
Custom Controls
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
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.
Internationalization (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.
Right-to-Left (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.
Truncated Titles & Tooltip
Long step titles are clipped to an ellipsis. Hover the nav title above to read the full text.
Inline track rail
nav="track"
nav="pills" — the default
The Review step binds no [valid] at all, so its verdict is null: nobody has said anything, and the step counts as in order once it has been visited. The number under the tick never goes away — the marker gains a mark, it does not swap identity.
Reachability
Backwards is always allowed. Forwards is allowed only once every step from the current one up to the one before the target is in order — stated valid, or, with nothing stated, visited. A disabled step is closed off either way.
- AccountisInOrder(0) = falseisReachable(0) = true
- AddressisInOrder(1) = falseisReachable(1) = false
- PaymentisInOrder(2) = falseisReachable(2) = false
- ReviewisInOrder(3) = falseisReachable(3) = false
Standing on Account with nothing ticked, goTo(2) is refused: Address is out of order. Tick Account and Address and the same click lands.
Saving before a jump
Press Continue and watch the rail: the step does not move until the save answers.
Step order vocabulary
| Term | What it means | Account | Address | Review |
|---|---|---|---|---|
visited | The user has stood on this step. A jump over it does not set it, and walking back does not unset it. | yes | no | no |
valid | Your verdict on this step's own data. Tri-state: true, false, or null when nobody has said. | null | null | null |
inOrder | The stated validity when there is one, otherwise visited. This is what the tick paints and what the forward gate reads. | true | false | false |
reachable | What the track lets you activate from here: backwards always, forwards only once every step in between is in order. A disabled step is closed off both ways. | true | true | false |
isCompleted, in the hubStepTrigger context, is none of these: it still answers index < currentIndex, so every template written before 22.12.0 reads the same.