API reference

Here's the full contract for milestones: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial milestones in with 6 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`orientation (hub-milestones)`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of the timeline.
`state (hub-milestone)`	`'complete' \| 'active' \| 'pending' \| 'error'`	`'pending'`	Visual state of the node; drives the node and connector colors.
`color (hub-milestone)`	`string`	`''`	Per-node color override (any CSS color). Wins over the state color.
`label (hub-milestone)`	`string`	`''`	Fallback text shown inside the node when no `hubMilestoneNode` template is provided.
`pulse (hub-milestones)`	`boolean`	`false`	When set on `<hub-milestones>`, the active node emits a soft expanding wave to draw attention to the current step. Opt-in; respects `prefers-reduced-motion`.
`reveal (hub-milestones)`	`boolean`	`true`	When the timeline scrolls into view it animates the accent trail filling up to the active node. On by default — configure globally with `provideHubMilestones({ reveal: false })` or per instance with `[reveal]`. Respects `prefers-reduced-motion`.

Outputs

No outputs documented yet.

Templates

Make it yours — 2 template slots let you project custom markup.

Name	Description	Example
`hubMilestoneNode`	Marks an `<ng-template>` whose content renders INSIDE the milestone circle (number, icon, emoji, avatar). Takes precedence over `label` and auto-numbering.	`<hub-milestone> <ng-template hubMilestoneNode>★</ng-template> <h4>Shipped</h4> </hub-milestone>`
`hub-milestone body (ng-content)`	Any content projected directly into `hub-milestone` (outside the node template) renders as the body next to the circle.	`<hub-milestone state="active"> <h4>Payment</h4> <p>Enter your payment method.</p> </hub-milestone>`