Timeline

Order history

Choose an orientation and content position. On small screens, vertical events stack on one side.

Select an event to view its details.

Basic

Primitive values work without templates. Objects use a content template to choose what to display.

Templates

Import AvTimeline, AvTimelineContent, AvTimelineOpposite and AvTimelineMarker from avero-ui. Each template receives the event, index, first and last. Bind the event collection to each directive for type inference.

<av-timeline [value]="events" align="alternate" label="Order history">
  <ng-template [avTimelineContent]="events" let-event let-index="index">
    <h3>{{ event.status }}</h3>
    <p>{{ event.description }}</p>
  </ng-template>
  <ng-template [avTimelineOpposite]="events" let-event>
    {{ event.date }}
  </ng-template>
  <ng-template [avTimelineMarker]="events" let-event>
    <span class="custom-marker">{{ event.symbol }}</span>
  </ng-template>
</av-timeline>

Usage and API

Inputs: value, label, layout, align, trackBy and emptyMessage. The default layout is vertical. Use left or right for vertical alignment, top or bottom for horizontal alignment, or alternate for either orientation. Left places the content to the right of the line; right reverses it. In horizontal mode, left and right fall back to bottom.