Installation
import { WrTimeline, WrTimelineItem } from 'ngwr/timeline';
@Component({ imports: [WrTimeline, WrTimelineItem] })
export class MyComponent {}Vertical
<wr-timeline>
<wr-timeline-item title="Created" time="2026-05-01">Initial commit.</wr-timeline-item>
<wr-timeline-item title="Deployed" time="2026-05-02" color="success">Live.</wr-timeline-item>
</wr-timeline>Horizontal
<wr-timeline orientation="horizontal">
<wr-timeline-item title="Plan" time="Q1">Scope agreed.</wr-timeline-item>
<wr-timeline-item title="Ship" time="Q3" color="success">Released.</wr-timeline-item>
</wr-timeline>API
<wr-timeline> inputs.
| Name | Description | Type | Default |
|---|---|---|---|
orientation | Layout direction. | 'vertical' | 'horizontal' | 'vertical' |
Item API
<wr-timeline-item> inputs.
| Name | Description | Type | Default |
|---|---|---|---|
title | Bold event title. | string | '' |
time | Muted timestamp shown above the title. | string | '' |
color | Dot color. | 'primary' | 'success' | 'warning' | 'danger' | 'medium' | 'primary' |