@anguless/angulux/timeline

timeline

1 declarations3 demos

import

import { TimelineModule } from '@anguless/angulux/timeline';

Basic

Timeline lays out a list of events, with the content slot rendering each one.

Ordered

Processing

Shipped

Delivered

<agl-timeline [value]="events" style="width: 100%">    <ng-template #content let-event>        {{ event.status }}    </ng-template></agl-timeline>

Horizontal

Layout switches the axis; align decides which side the content sits on.

Ordered

Processing

Shipped

Delivered

<agl-timeline [value]="events" layout="horizontal" align="top" style="width: 100%">    <ng-template #content let-event>        {{ event.status }}    </ng-template></agl-timeline>

Opposite

The opposite slot fills the other side of the axis.

15/10/2026 10:30

Ordered

15/10/2026 14:00

Processing

16/10/2026 09:45

Shipped

17/10/2026 08:15

Delivered

<agl-timeline [value]="events" align="alternate" style="width: 100%">    <ng-template #content let-event>        {{ event.status }}    </ng-template>    <ng-template #opposite let-event>        <small>{{ event.date }}</small>    </ng-template></agl-timeline>

API

Generated from the committed corpus, which check:corpus holds to the built library.

Timeline

componentagl-timeline

Timeline visualizes a series of chained events.

Input	Type	Default	Description
value	any[] \| undefined	not documented	An array of events to display.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
align	string	not documented	Position of the timeline bar relative to the content. Valid values are "left", "right" for vertical layout and "top", "bottom" for horizontal layout.
layout	'vertical' \| 'horizontal'	not documented	Orientation of the timeline.

Template slot	Description
<ng-template #content>	Custom content template.
<ng-template #opposite>	Custom opposite item template.
<ng-template #marker>	Custom marker template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.