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.

Example: Basic usage

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

Example: Full configuration

<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

new TimelineComponent<T>(cdr, elementRef, ngZone): TimelineComponent<T>
Type Parameters
- T = any
Parameters
- cdr: ChangeDetectorRef
- elementRef: ElementRef<any>
- ngZone: NgZone
Returns TimelineComponent<T>
- Defined in lib/component/timeline.component.ts:507

Properties

`Private` _allowLoad

_allowLoad: boolean = true

`Private` _destroy$

_destroy$: Subject<void> = ...

`Private` _groups

_groups: TimelineGroup<T>[] = []

`Private` _hasLoaded

_hasLoaded: boolean = false

`Private` _initialized

_initialized: boolean = false

`Private` `Optional` _intersectionObserver

_intersectionObserver?: IntersectionObserver

`Private` _layout

_layout: TimelineLayout = 'single'

`Private` _orientation

_orientation: TimelineOrientation = 'vertical'

`Private` _scroll$

_scroll$: Subject<Event> = ...

`Private` _segmentGrouping

_segmentGrouping: TimeSegmentGrouping = 'month'

`Private` _selectedEventId

_selectedEventId: null | string = null

`Private` _sortOrder

_sortOrder: TimelineSortOrder = 'desc'

`Optional` actionsTemplate

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

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

Type declaration

actions: TimelineAction[]
event: MJTimelineEvent<T>

afterActionClick

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

Emitted after an action button is clicked.

afterEventClick

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

Emitted after an event card is clicked.

afterEventCollapse

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

Emitted after an event card collapses.

afterEventExpand

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

Emitted after an event card expands.

afterEventHover

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

Emitted after hover state changes.

afterLoad

afterLoad: EventEmitter<AfterLoadArgs> = ...

Emitted after data loading completes.

afterSegmentCollapse

afterSegmentCollapse: EventEmitter<AfterSegmentCollapseArgs> = ...

Emitted after a time segment collapses.

afterSegmentExpand

afterSegmentExpand: EventEmitter<AfterSegmentExpandArgs> = ...

Emitted after a time segment expands.

allEvents

allEvents: MJTimelineEvent<T>[] = []

All flattened events (for non-segmented display).

ariaLabel

ariaLabel: string = 'Timeline'

ARIA label for the timeline container.

Default

'Timeline'

beforeActionClick

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

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

beforeEventClick

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

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

beforeEventCollapse

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

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

beforeEventExpand

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

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

beforeEventHover

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

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

beforeLoad

beforeLoad: EventEmitter<BeforeLoadArgs> = ...

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

beforeSegmentCollapse

beforeSegmentCollapse: EventEmitter<BeforeSegmentCollapseArgs> = ...

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

beforeSegmentExpand

beforeSegmentExpand: EventEmitter<BeforeSegmentExpandArgs> = ...

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

`Optional` bodyTemplate

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

Custom template for card body. Context: { event }

Type declaration

event: MJTimelineEvent<T>

`Optional` cardTemplate

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

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

Type declaration

event: MJTimelineEvent<T>
group: TimelineGroup<T>

`Private` cdr

cdr: ChangeDetectorRef

defaultCardConfig

defaultCardConfig: TimelineCardConfig = ...

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

`Private` elementRef

elementRef: ElementRef<any>

emptyIcon

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

Icon shown with empty message.

Default

'fa-regular fa-calendar-xmark'

emptyMessage

emptyMessage: string = 'No events to display'

Message shown when no events exist.

Default

'No events to display'

`Optional` emptyTemplate

emptyTemplate?: TemplateRef<void>

Custom template for empty state.

enableKeyboardNavigation

enableKeyboardNavigation: boolean = true

Enable keyboard navigation.

Default

true

focusedEventIndex

focusedEventIndex: number = -1

Index of currently focused event (for keyboard navigation).

`Optional` headerTemplate

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

Custom template for card header. Context: { event }

Type declaration

event: MJTimelineEvent<T>

isInitialized

isInitialized: boolean = false

Whether initial load is complete.

isLoading

isLoading: boolean = false

Whether currently loading data.

loadingMessage

loadingMessage: string = 'Loading timeline...'

Message shown while loading.

Default

'Loading timeline...'

`Optional` loadingTemplate

loadingTemplate?: TemplateRef<void>

Custom template for loading state.

`Private` ngZone

ngZone: NgZone

`Optional` scrollContainer

scrollContainer?: ElementRef<HTMLElement>

scrollState

scrollState: VirtualScrollState = ...

Virtual scroll state.

`Optional` segmentHeaderTemplate

segmentHeaderTemplate?: TemplateRef<{
segment: TimelineSegment;
}>

Custom template for segment header. Context: { segment }

Type declaration

segment: TimelineSegment

segments

segments: TimelineSegment[] = []

Current time segments with events.

segmentsCollapsible

segmentsCollapsible: boolean = true

Whether time segments can be collapsed.

Default

true

segmentsDefaultExpanded

segmentsDefaultExpanded: boolean = true

Whether segments start expanded.

Default

true

virtualScroll

virtualScroll: VirtualScrollConfig = ...

Virtual scrolling configuration.

Accessors

allowLoad

get allowLoad(): boolean
Controls whether data loading is allowed. Set to false to defer loading until ready.

Returns boolean
Default
```
true
```
- Defined in lib/component/timeline.component.ts:199
set allowLoad(value): void
Parameters
- value: boolean
Returns void
- Defined in lib/component/timeline.component.ts:202

groups

get groups(): TimelineGroup<T>[]
Array of timeline groups to display. Each group defines a data source and display configuration.

Returns TimelineGroup<T>[]
- Defined in lib/component/timeline.component.ts:153
set groups(value): void
Parameters
- value: TimelineGroup<T>[]
Returns void
- Defined in lib/component/timeline.component.ts:156

layout

get layout(): TimelineLayout
Layout mode for vertical timeline.
- single: All cards on one side
- alternating: Cards alternate sides
Returns TimelineLayout
Default
```
'single'
```
- Defined in lib/component/timeline.component.ts:241
set layout(value): void
Parameters
- value: TimelineLayout
Returns void
- Defined in lib/component/timeline.component.ts:244

orientation

get orientation(): TimelineOrientation
Timeline orientation.
- vertical: Events displayed top-to-bottom
- horizontal: Events displayed left-to-right
Returns TimelineOrientation
Default
```
'vertical'
```
- Defined in lib/component/timeline.component.ts:223
set orientation(value): void
Parameters
- value: TimelineOrientation
Returns void
- Defined in lib/component/timeline.component.ts:226

segmentGrouping

get segmentGrouping(): TimeSegmentGrouping
How to group events into time segments.

Returns TimeSegmentGrouping
Default
```
'month'
```
- Defined in lib/component/timeline.component.ts:279
set segmentGrouping(value): void
Parameters
- value: TimeSegmentGrouping
Returns void
- Defined in lib/component/timeline.component.ts:282

selectedEventId

get selectedEventId(): null | string
ID of the currently selected event. When set, the corresponding event will be highlighted with the focused style.

Returns null | string
- Defined in lib/component/timeline.component.ts:372
set selectedEventId(value): void
Parameters
- value: null | string
Returns void
- Defined in lib/component/timeline.component.ts:375

sortOrder

get sortOrder(): TimelineSortOrder
Sort order for events.
- desc: Newest first
- asc: Oldest first
Returns TimelineSortOrder
Default
```
'desc'
```
- Defined in lib/component/timeline.component.ts:259
set sortOrder(value): void
Parameters
- value: TimelineSortOrder
Returns void
- Defined in lib/component/timeline.component.ts:262

Methods

`Private` activateFocusedEvent

activateFocusedEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1517

`Private` buildSegments

buildSegments(): void
Builds time segments from events.

Returns void
- Defined in lib/component/timeline.component.ts:1232

collapseAllEvents

collapseAllEvents(): void
Collapses all event cards.

Returns void
- Defined in lib/component/timeline.component.ts:690

collapseAllSegments

collapseAllSegments(): void
Collapses all time segments.

Returns void
- Defined in lib/component/timeline.component.ts:714

collapseEvent

collapseEvent(eventId): void
Collapses a specific event by ID.
Parameters
- eventId: string
Returns void
- Defined in lib/component/timeline.component.ts:737

`Private` collapseEventInternal

collapseEventInternal(event, index, domEvent?): void
Collapses an event with events.
Parameters
- event: MJTimelineEvent<T>
- index: number
- Optional domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:1382

`Private` collapseFocusedEvent

collapseFocusedEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1524

`Private` collapseSegment

collapseSegment(segment): void
Collapses a segment.
Parameters
- segment: TimelineSegment
Returns void
- Defined in lib/component/timeline.component.ts:1446

`Private` createTimelineEvent

createTimelineEvent(record, group, groupIndex): MJTimelineEvent<T>
Creates a timeline event from a source record.
Parameters
- record: T
- group: TimelineGroup<T>
- groupIndex: number
Returns MJTimelineEvent<T>
- Defined in lib/component/timeline.component.ts:1198

`Private` didGroupsChange

didGroupsChange(prev, next): boolean
Check if timeline groups have meaningfully changed
Parameters
- prev: TimelineGroup<T>[]
- next: TimelineGroup<T>[]
Returns boolean
- Defined in lib/component/timeline.component.ts:179

expandAllEvents

expandAllEvents(): void
Expands all event cards.

Returns void
- Defined in lib/component/timeline.component.ts:678

expandAllSegments

expandAllSegments(): void
Expands all time segments.

Returns void
- Defined in lib/component/timeline.component.ts:702

expandEvent

expandEvent(eventId): void
Expands a specific event by ID.
Parameters
- eventId: string
Returns void
- Defined in lib/component/timeline.component.ts:726

`Private` expandEventInternal

expandEventInternal(event, index, domEvent?): void
Expands an event with events.
Parameters
- event: MJTimelineEvent<T>
- index: number
- Optional domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:1350

`Private` expandSegment

expandSegment(segment): void
Expands a segment.
Parameters
- segment: TimelineSegment
Returns void
- Defined in lib/component/timeline.component.ts:1414

`Private` focusFirstEvent

focusFirstEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1503

`Private` focusLastEvent

focusLastEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1510

`Private` focusNextEvent

focusNextEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1486

`Private` focusPreviousEvent

focusPreviousEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1496

formatDate

formatDate(date, format?): string
Formats a date for display.
Parameters
- date: Date
- Optional format: string
Returns string
- Defined in lib/component/timeline.component.ts:1059

`Private` formatDateInternal

formatDateInternal(date, format): string
Simple date formatter (replaces Angular DatePipe for standalone use). Uses placeholder tokens to avoid replacement conflicts.
Parameters
- date: Date
- format: string
Returns string
- Defined in lib/component/timeline.component.ts:1604

getActions

getActions(event): TimelineAction[]
Gets the actions for an event.
Parameters
- event: MJTimelineEvent<T>
Returns TimelineAction[]
- Defined in lib/component/timeline.component.ts:1047

getAllEvents

getAllEvents(): MJTimelineEvent<T>[]
Gets all events (flattened).

Returns MJTimelineEvent<T>[]
- Defined in lib/component/timeline.component.ts:784

getColor

getColor(event): string
Gets the color for a group/event.
Parameters
- event: MJTimelineEvent<T>
Returns string
- Defined in lib/component/timeline.component.ts:1015

getEffectiveCardConfig

getEffectiveCardConfig(event): TimelineCardConfig
Gets the effective card config for an event.
Parameters
- event: MJTimelineEvent<T>
Returns TimelineCardConfig
- Defined in lib/component/timeline.component.ts:1003

getEvent

getEvent(eventId): undefined | MJTimelineEvent<T>
Gets an event by ID.
Parameters
- eventId: string
Returns undefined | MJTimelineEvent<T>
- Defined in lib/component/timeline.component.ts:777

getFieldValue

getFieldValue(event, field): string
Gets the value of a display field from an event.
Parameters
- event: MJTimelineEvent<T>
- field: TimelineDisplayField
Returns string
- Defined in lib/component/timeline.component.ts:1067

getGlobalIndex

getGlobalIndex(event): number
Gets the global index of an event in the allEvents array.
Parameters
- event: MJTimelineEvent<T>
Returns number
- Defined in lib/component/timeline.component.ts:1102

getIcon

getIcon(event): string
Gets the icon for a group/event.
Parameters
- event: MJTimelineEvent<T>
Returns string
- Defined in lib/component/timeline.component.ts:1031

`Private` getSegmentInfo

getSegmentInfo(date): {
    endDate: Date;
    label: string;
    startDate: Date;
}
Gets segment information for a date.
Parameters
- date: Date
Returns {
    endDate: Date;
    label: string;
    startDate: Date;
}
- endDate: Date
- label: string
- startDate: Date
- Defined in lib/component/timeline.component.ts:1270

isEventSelected

isEventSelected(event, globalIndex): boolean
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
- event: MJTimelineEvent<T>
- globalIndex: number
Returns boolean
- Defined in lib/component/timeline.component.ts:1112

`Private` loadAllGroups

loadAllGroups(): Promise<void>
Loads data from all groups.

Returns Promise<void>
- Defined in lib/component/timeline.component.ts:1128

`Private` loadFromEntity

loadFromEntity(group): Promise<T[]>
Loads data from MemberJunction entity.
Parameters
- group: TimelineGroup<T>
Returns Promise<T[]>
- Defined in lib/component/timeline.component.ts:1164

`Private` loadGroup

loadGroup(group, groupIndex): Promise<void>
Loads data from a single group.
Parameters
- group: TimelineGroup<T>
- groupIndex: number
Returns Promise<void>
- Defined in lib/component/timeline.component.ts:1145

loadMore

loadMore(): Promise<void>
Loads more events (for virtual scrolling).

Returns Promise<void>
- Defined in lib/component/timeline.component.ts:623

`Private` loadNextBatch

loadNextBatch(): Promise<void>
Loads the next batch for virtual scrolling.

Returns Promise<void>
- Defined in lib/component/timeline.component.ts:1190

`Private` mapEventConfigToCardConfig

mapEventConfigToCardConfig(config?): Partial<TimelineCardConfig>
Maps event config to card config properties.
Parameters
- config: TimelineEventConfig = {}
Returns Partial<TimelineCardConfig>
- Defined in lib/component/timeline.component.ts:1592

ngAfterViewInit

ngAfterViewInit(): void
Returns void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in lib/component/timeline.component.ts:529

ngOnDestroy

ngOnDestroy(): void
Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in lib/component/timeline.component.ts:538

ngOnInit

ngOnInit(): void
Returns void
Implementation of OnInit.ngOnInit
- Defined in lib/component/timeline.component.ts:517

onActionClick

onActionClick(event, action, index, domEvent): void
Handles action button click.
Parameters
- event: MJTimelineEvent<T>
- action: TimelineAction
- index: number
- domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:898

onEventClick

onEventClick(event, index, domEvent): void
Handles click on an event card.
Parameters
- event: MJTimelineEvent<T>
- index: number
- domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:795

onEventMouseEnter

onEventMouseEnter(event, index, domEvent): void
Handles mouse enter on an event card.
Parameters
- event: MJTimelineEvent<T>
- index: number
- domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:840

onEventMouseLeave

onEventMouseLeave(event, index, domEvent): void
Handles mouse leave on an event card.
Parameters
- event: MJTimelineEvent<T>
- index: number
- domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:869

onKeyDown

onKeyDown(event): void
Handles keyboard navigation.
Parameters
- event: KeyboardEvent
Returns void
- Defined in lib/component/timeline.component.ts:955

onScroll

onScroll(event): void
Handles scroll events for virtual scrolling.
Parameters
- event: Event
Returns void
- Defined in lib/component/timeline.component.ts:948

`Private` onScrollCheck

onScrollCheck(): void
Returns void
- Defined in lib/component/timeline.component.ts:1571

onSegmentClick

onSegmentClick(segment): void
Handles segment header click.
Parameters
- segment: TimelineSegment
Returns void
- Defined in lib/component/timeline.component.ts:933

onToggleExpand

onToggleExpand(event, index, domEvent): void
Handles expand/collapse toggle on an event.
Parameters
- event: MJTimelineEvent<T>
- index: number
- domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:832

refresh

refresh(force?): Promise<void>
Refreshes all data from the configured groups. Clears existing data and reloads from sources.
Parameters
- force: boolean = false
Returns Promise<void>
- Defined in lib/component/timeline.component.ts:555

scrollToDate

scrollToDate(date, behavior?): void
Scrolls to a specific date.
Parameters
- date: Date
- behavior: ScrollBehavior = 'smooth'
Returns void
- Defined in lib/component/timeline.component.ts:758

scrollToEvent

scrollToEvent(eventId, behavior?): void
Scrolls to a specific event.
Parameters
- eventId: string
- behavior: ScrollBehavior = 'smooth'
Returns void
- Defined in lib/component/timeline.component.ts:748

`Private` scrollToFocusedEvent

scrollToFocusedEvent(): void
Returns void
- Defined in lib/component/timeline.component.ts:1533

`Private` setEventExpanded

setEventExpanded(event, expanded): void
Sets event expanded state.
Parameters
- event: MJTimelineEvent<T>
- expanded: boolean
Returns void
- Defined in lib/component/timeline.component.ts:1343

`Private` setSegmentExpanded

setSegmentExpanded(segment, expanded): void
Sets segment expanded state without events.
Parameters
- segment: TimelineSegment
- expanded: boolean
Returns void
- Defined in lib/component/timeline.component.ts:1478

`Private` setupIntersectionObserver

setupIntersectionObserver(): void
Returns void
- Defined in lib/component/timeline.component.ts:1545

`Private` sortEvents

sortEvents(): void
Sorts events by date according to sortOrder.

Returns void
- Defined in lib/component/timeline.component.ts:1218

`Private` toggleEventExpanded

toggleEventExpanded(event, index, domEvent?): void
Toggles event expanded state.
Parameters
- event: MJTimelineEvent<T>
- index: number
- Optional domEvent: Event
Returns void
- Defined in lib/component/timeline.component.ts:1332

trackByEventId

trackByEventId(_index, event): string
Track by function for ngFor.
Parameters
- _index: number
- event: MJTimelineEvent<T>
Returns string
- Defined in lib/component/timeline.component.ts:1088

trackBySegmentLabel

trackBySegmentLabel(_index, segment): string
Track by function for segments.
Parameters
- _index: number
- segment: TimelineSegment
Returns string
- Defined in lib/component/timeline.component.ts:1095

Class TimelineComponent<T>

Example: Basic usage

Example: Full configuration

Type Parameters

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns TimelineComponent<T>

Properties

Private _allowLoad

Private _destroy$

Private _groups

Private _hasLoaded

Private _initialized

Private Optional _intersectionObserver

Private _layout

Private _orientation

Private _scroll$

Private _segmentGrouping

Private _selectedEventId

Private _sortOrder

Optional actionsTemplate

Type declaration

actions: TimelineAction[]

event: MJTimelineEvent<T>

afterActionClick

afterEventClick

afterEventCollapse

afterEventExpand

afterEventHover

afterLoad

afterSegmentCollapse

afterSegmentExpand

allEvents

ariaLabel

Default

beforeActionClick

beforeEventClick

beforeEventCollapse

beforeEventExpand

beforeEventHover

beforeLoad

beforeSegmentCollapse

beforeSegmentExpand

Optional bodyTemplate

Type declaration

event: MJTimelineEvent<T>

Optional cardTemplate

Type declaration

event: MJTimelineEvent<T>

group: TimelineGroup<T>

Private cdr

defaultCardConfig

Private elementRef

emptyIcon

Default

emptyMessage

Default

Optional emptyTemplate

enableKeyboardNavigation

Default

focusedEventIndex

Optional headerTemplate

Type declaration

event: MJTimelineEvent<T>

isInitialized

isLoading

loadingMessage

Default

Optional loadingTemplate

Private ngZone

Optional scrollContainer

scrollState

`Private` _allowLoad

`Private` _destroy$

`Private` _groups

`Private` _hasLoaded

`Private` _initialized

`Private` `Optional` _intersectionObserver

`Private` _layout

`Private` _orientation

`Private` _scroll$

`Private` _segmentGrouping

`Private` _selectedEventId

`Private` _sortOrder

`Optional` actionsTemplate

`Optional` bodyTemplate

`Optional` cardTemplate

`Private` cdr

`Private` elementRef

`Optional` emptyTemplate

`Optional` headerTemplate

`Optional` loadingTemplate

`Private` ngZone

`Optional` scrollContainer

`Optional` segmentHeaderTemplate

`Private` activateFocusedEvent

`Private` buildSegments

`Private` collapseEventInternal

`Private` collapseFocusedEvent

`Private` collapseSegment

`Private` createTimelineEvent

`Private` didGroupsChange