@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UITimeline<T>

    A visual timeline that renders events from a datasource.

    Each event is rendered through either:

    • A projected template (ng-template) for simple, uniform rendering.
    • A component resolver function (withComponent) that returns the Angular component class to instantiate for each event. The resolved component receives the event data via an event input.

    When both are provided, withComponent takes precedence.

    Template-based rendering:

    <ui-timeline [datasource]="events">
      <ng-template let-event let-i="index">
        <h3>{{ event.title }}</h3>
        <p>{{ event.description }}</p>
      </ng-template>
    </ui-timeline>

    Component-based rendering:

    const resolver: TimelineComponentResolver<MyEvent> = (event) =>
      event.type === 'milestone' ? MilestoneCard : DefaultCard;

    <ui-timeline [datasource]="events" [withComponent]="resolver" />

    Type Parameters

    • T = unknown

      The event data type.

    Index

    Constructors

    constructor

    Properties

    alignment ariaLabel datasource eventClick orientation withComponent

    Methods

    buildComponentInputs buildContext resolveComponent

    Constructors

    • Type Parameters

      • T = unknown

        The event data type.

      Returns UITimeline<T>

    Properties

    alignment: InputSignal<TimelineAlignment> = ...

    Side alignment for events. Defaults to 'alternate'.

    ariaLabel: InputSignal<string> = ...

    Accessible label for the timeline container.

    datasource: InputSignal<IDatasource<T>> = ...

    The datasource providing timeline events.

    eventClick: OutputEmitterRef<T> = ...

    Emitted when a timeline event is clicked.

    orientation: InputSignal<TimelineOrientation> = ...

    Layout direction. Defaults to 'vertical'.

    withComponent: InputSignal<TimelineComponentResolver<T> | undefined> = ...

    A function that returns the component class to render for a given event. When provided, takes precedence over the projected template.

    Methods

    • Build the injector inputs for a dynamically rendered component.

      Parameters

      • event: T
      • index: number

      Returns Record<string, unknown>

    • Build template context for an event at a given index.

      Parameters

      • event: T
      • index: number

      Returns TimelineEventContext<T>

    • Resolve the component class for a given event.

      Parameters

      • event: T

      Returns Type<unknown>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods