Member Junction
    Preparing search index...

    Class TimelineComponent<T>

    MJ Timeline Component - Displays chronological data in a rich, interactive timeline.

    The timeline component supports multiple data groups, virtual scrolling for large datasets, collapsible time segments, and a comprehensive event system that allows container components to intercept and modify behavior.

    <mj-timeline [groups]="myGroups"></mj-timeline>

    <mj-timeline
      [groups]="groups"
      orientation="vertical"
      layout="alternating"
      sortOrder="desc"
      segmentGrouping="month"
      [segmentsCollapsible]="true"
      [virtualScroll]="{ enabled: true, batchSize: 25 }"
      (beforeEventClick)="onBeforeClick($event)"
      (afterActionClick)="onAction($event)">

      <ng-template #emptyTemplate>
        <div class="custom-empty">No events found</div>
      </ng-template>

    </mj-timeline>

    Type Parameters

    • T = any

    Implements

    • OnInit
    • OnDestroy
    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    actionsTemplate? afterActionClick afterEventClick afterEventCollapse afterEventExpand afterEventHover afterLoad afterSegmentCollapse afterSegmentExpand allEvents ariaLabel beforeActionClick beforeEventClick beforeEventCollapse beforeEventExpand beforeEventHover beforeLoad beforeSegmentCollapse beforeSegmentExpand bodyTemplate? cardTemplate? defaultCardConfig emptyIcon emptyMessage emptyTemplate? enableKeyboardNavigation focusedEventIndex headerTemplate? isInitialized isLoading loadingMessage loadingTemplate? scrollContainer? scrollState segmentHeaderTemplate? segments segmentsCollapsible segmentsDefaultExpanded virtualScroll

    Accessors

    allowLoad groups layout orientation segmentGrouping selectedEventId sortOrder

    Methods

    collapseAllEvents collapseAllSegments collapseEvent expandAllEvents expandAllSegments expandEvent formatDate getActions getAllEvents getColor getEffectiveCardConfig getEvent getFieldValue getGlobalIndex getIcon isEventSelected loadMore ngAfterViewInit ngOnDestroy ngOnInit onActionClick onEventClick onEventMouseEnter onEventMouseLeave onKeyDown onScroll onSegmentClick onToggleExpand refresh scrollToDate scrollToEvent trackByEventId trackBySegmentLabel

    Constructors

    Properties

    actionsTemplate?: TemplateRef<
        { actions: TimelineAction[]; event: MJTimelineEvent<T> },
    >

    Custom template for card actions. Context: { event, actions }

    afterActionClick: EventEmitter<AfterActionClickArgs<T>> = ...

    Emitted after an action button is clicked.

    afterEventClick: EventEmitter<AfterEventClickArgs<T>> = ...

    Emitted after an event card is clicked.

    afterEventCollapse: EventEmitter<AfterEventCollapseArgs<T>> = ...

    Emitted after an event card collapses.

    afterEventExpand: EventEmitter<AfterEventExpandArgs<T>> = ...

    Emitted after an event card expands.

    afterEventHover: EventEmitter<AfterEventHoverArgs<T>> = ...

    Emitted after hover state changes.

    afterLoad: EventEmitter<AfterLoadArgs> = ...

    Emitted after data loading completes.

    afterSegmentCollapse: EventEmitter<AfterSegmentCollapseArgs> = ...

    Emitted after a time segment collapses.

    afterSegmentExpand: EventEmitter<AfterSegmentExpandArgs> = ...

    Emitted after a time segment expands.

    allEvents: MJTimelineEvent<T>[] = []

    All flattened events (for non-segmented display).

    ariaLabel: string = 'Timeline'

    ARIA label for the timeline container.

    'Timeline'
    beforeActionClick: EventEmitter<BeforeActionClickArgs<T>> = ...

    Emitted before an action button is clicked. Set cancel = true to prevent.

    beforeEventClick: EventEmitter<BeforeEventClickArgs<T>> = ...

    Emitted before an event card is clicked. Set cancel = true to prevent.

    beforeEventCollapse: EventEmitter<BeforeEventCollapseArgs<T>> = ...

    Emitted before an event card collapses. Set cancel = true to prevent.

    beforeEventExpand: EventEmitter<BeforeEventExpandArgs<T>> = ...

    Emitted before an event card expands. Set cancel = true to prevent.

    beforeEventHover: EventEmitter<BeforeEventHoverArgs<T>> = ...

    Emitted before hover state changes. Set cancel = true to prevent.

    beforeLoad: EventEmitter<BeforeLoadArgs> = ...

    Emitted before data loading begins. Set cancel = true to prevent.

    beforeSegmentCollapse: EventEmitter<BeforeSegmentCollapseArgs> = ...

    Emitted before a time segment collapses. Set cancel = true to prevent.

    beforeSegmentExpand: EventEmitter<BeforeSegmentExpandArgs> = ...

    Emitted before a time segment expands. Set cancel = true to prevent.

    bodyTemplate?: TemplateRef<{ event: MJTimelineEvent<T> }>

    Custom template for card body. Context: { event }

    cardTemplate?: TemplateRef<
        { event: MJTimelineEvent<T>; group: TimelineGroup<T> },
    >

    Custom template for entire card. Context: { event, group }

    defaultCardConfig: TimelineCardConfig = ...

    Default card configuration applied to all groups. Individual groups can override these settings.

    emptyIcon: string = 'fa-regular fa-calendar-xmark'

    Icon shown with empty message.

    'fa-regular fa-calendar-xmark'
    emptyMessage: string = 'No events to display'

    Message shown when no events exist.

    'No events to display'
    emptyTemplate?: TemplateRef<void>

    Custom template for empty state.

    enableKeyboardNavigation: boolean = true

    Enable keyboard navigation.

    true
    focusedEventIndex: number = -1

    Index of currently focused event (for keyboard navigation).

    headerTemplate?: TemplateRef<{ event: MJTimelineEvent<T> }>

    Custom template for card header. Context: { event }

    isInitialized: boolean = false

    Whether initial load is complete.

    isLoading: boolean = false

    Whether currently loading data.

    loadingMessage: string = 'Loading timeline...'

    Message shown while loading.

    'Loading timeline...'
    loadingTemplate?: TemplateRef<void>

    Custom template for loading state.

    scrollContainer?: ElementRef<HTMLElement>
    scrollState: VirtualScrollState = ...

    Virtual scroll state.

    segmentHeaderTemplate?: TemplateRef<{ segment: TimelineSegment }>

    Custom template for segment header. Context: { segment }

    segments: TimelineSegment[] = []

    Current time segments with events.

    segmentsCollapsible: boolean = true

    Whether time segments can be collapsed.

    true
    segmentsDefaultExpanded: boolean = true

    Whether segments start expanded.

    true
    virtualScroll: VirtualScrollConfig = ...

    Virtual scrolling configuration.

    Accessors

    • get selectedEventId(): string | null

      ID of the currently selected event. When set, the corresponding event will be highlighted with the focused style.

      Returns string | null

    • set selectedEventId(value: string | null): void

      Parameters

      • value: string | null

      Returns void

    Methods

    • Checks if an event is currently selected/focused. An event is selected if either:

      • Its ID matches the selectedEventId input
      • Its global index matches the focusedEventIndex (keyboard navigation)

      Parameters

      Returns boolean

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    • A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • Refreshes all data from the configured groups. Clears existing data and reloads from sources.

      Parameters

      • force: boolean = false

      Returns Promise<void>

    • Scrolls to a specific date.

      Parameters

      • date: Date
      • behavior: ScrollBehavior = 'smooth'

      Returns void

    • Scrolls to a specific event.

      Parameters

      • eventId: string
      • behavior: ScrollBehavior = 'smooth'

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods