The ngs-step-tracker component displays the status of related steps without owning wizard navigation, validation, or routed content. Use it when users need to see which stages are completed, current, pending, blocked, or disabled.
Use Step Tracker for passive process status in cards, sidebars, drawers, setup summaries, payroll review flows, fulfillment states, and approval progress. Use ngs-stepper instead when users need next/previous navigation, linear validation, or step-owned content.
Bind activeIndex when the completed, current, and pending states should be derived from application state. Set item state explicitly for fixed statuses such as error or disabled. When activeIndex equals the number of items, all auto-state steps are completed.
Step Tracker supports vertical status lists and horizontal progress summaries. Items can use simple label and description inputs, or projected ngs-step-tracker-label and ngs-step-tracker-description elements when the copy needs richer markup. Completed and error indicators use NgStarter icons by default, can be configured globally with provideStepTracker, and can be overridden per tracker with ngsStepTrackerCompletedIcon and ngsStepTrackerErrorIcon templates.
Key Features:
- Status-first steps: Mark each item as completed, current, pending, error, or disabled, or leave it as auto so the parent tracker resolves it from
activeIndex. - Dynamic progress: Drive the current step with
[(activeIndex)],setActiveIndex(),next(), andprevious(). The final completed state is represented by anactiveIndexequal to the item count. - Flexible content: Use label and description inputs for compact status lists, or project label and description elements for richer templates.
- Vertical or horizontal: Show process status in a sidebar, card, drawer, or compact page header.
- Configurable indicators: Override completed and error icons globally with
provideStepTrackeror locally with icon template directives. - Themeable tokens: Tune marker size, connector colors, status colors, and typography through
--ngs-step-tracker-*variables.