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

    Hierarchy (View Summary)

    Implements

    • OnInit
    • OnDestroy
    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ActionsTemplate? afterActionClick AfterActionClick afterEventClick AfterEventClick afterEventCollapse AfterEventCollapse afterEventExpand AfterEventExpand afterEventHover AfterEventHover afterLoad AfterLoad afterSegmentCollapse AfterSegmentCollapse afterSegmentExpand AfterSegmentExpand AllEvents ariaLabel beforeActionClick BeforeActionClick beforeEventClick BeforeEventClick beforeEventCollapse BeforeEventCollapse beforeEventExpand BeforeEventExpand beforeEventHover BeforeEventHover beforeLoad BeforeLoad beforeSegmentCollapse BeforeSegmentCollapse beforeSegmentExpand BeforeSegmentExpand BodyTemplate? CardTemplate? DefaultCardConfig emptyIcon emptyMessage EmptyTemplate? enableKeyboardNavigation FocusedEventIndex HeaderTemplate? IsInitialized isLoading loadingMessage LoadingTemplate? Provider ScrollContainer? ScrollState SegmentHeaderTemplate? Segments segmentsCollapsible segmentsDefaultExpanded VirtualScroll ɵdir ɵfac

    Accessors

    actionsTemplate allEvents allowLoad AllowLoad bodyTemplate cardTemplate defaultCardConfig emptyTemplate focusedEventIndex groups Groups headerTemplate isInitialized layout Layout loadingTemplate orientation Orientation ProviderToUse RunQueryToUse RunViewToUse scrollContainer scrollState segmentGrouping SegmentGrouping segmentHeaderTemplate segments selectedEventId SelectedEventId sortOrder SortOrder virtualScroll

    Methods

    collapseAllEvents CollapseAllEvents collapseAllSegments CollapseAllSegments collapseEvent CollapseEvent expandAllEvents ExpandAllEvents expandAllSegments ExpandAllSegments expandEvent ExpandEvent formatDate getActions GetActions getAllEvents GetAllEvents getColor GetColor getEffectiveCardConfig GetEffectiveCardConfig getEvent GetEvent getFieldValue GetFieldValue getGlobalIndex GetGlobalIndex getIcon isEventSelected IsEventSelected loadMore LoadMore ngAfterViewInit ngOnDestroy ngOnInit onActionClick OnActionClick onEventClick OnEventClick onEventMouseEnter OnEventMouseEnter onEventMouseLeave OnEventMouseLeave onKeyDown OnKeyDown onScroll OnScroll onSegmentClick OnSegmentClick onToggleExpand OnToggleExpand refresh Refresh scrollToDate ScrollToDate scrollToEvent ScrollToEvent trackByEventId TrackByEventId trackBySegmentLabel TrackBySegmentLabel

    Constructors

    Properties

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

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

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

    Use AfterActionClick.

    The same emitter under the old binding name, so a template still binding (afterActionClick) keeps working. Must stay AFTER AfterActionClick: class fields initialise in order, and the other way round this captures undefined.

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

    Emitted after an action button is clicked.

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

    Use AfterEventClick.

    The same emitter under the old binding name, so a template still binding (afterEventClick) keeps working. Must stay AFTER AfterEventClick: class fields initialise in order, and the other way round this captures undefined.

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

    Emitted after an event card is clicked.

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

    Use AfterEventCollapse.

    The same emitter under the old binding name, so a template still binding (afterEventCollapse) keeps working. Must stay AFTER AfterEventCollapse: class fields initialise in order, and the other way round this captures undefined.

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

    Emitted after an event card collapses.

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

    Use AfterEventExpand.

    The same emitter under the old binding name, so a template still binding (afterEventExpand) keeps working. Must stay AFTER AfterEventExpand: class fields initialise in order, and the other way round this captures undefined.

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

    Emitted after an event card expands.

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

    Use AfterEventHover.

    The same emitter under the old binding name, so a template still binding (afterEventHover) keeps working. Must stay AFTER AfterEventHover: class fields initialise in order, and the other way round this captures undefined.

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

    Emitted after hover state changes.

    afterLoad: EventEmitter<AfterLoadArgs> = ...

    Use AfterLoad.

    The same emitter under the old binding name, so a template still binding (afterLoad) keeps working. Must stay AFTER AfterLoad: class fields initialise in order, and the other way round this captures undefined.

    AfterLoad: EventEmitter<AfterLoadArgs> = ...

    Emitted after data loading completes.

    afterSegmentCollapse: EventEmitter<AfterSegmentCollapseArgs> = ...

    Use AfterSegmentCollapse.

    The same emitter under the old binding name, so a template still binding (afterSegmentCollapse) keeps working. Must stay AFTER AfterSegmentCollapse: class fields initialise in order, and the other way round this captures undefined.

    AfterSegmentCollapse: EventEmitter<AfterSegmentCollapseArgs> = ...

    Emitted after a time segment collapses.

    afterSegmentExpand: EventEmitter<AfterSegmentExpandArgs> = ...

    Use AfterSegmentExpand.

    The same emitter under the old binding name, so a template still binding (afterSegmentExpand) keeps working. Must stay AFTER AfterSegmentExpand: class fields initialise in order, and the other way round this captures undefined.

    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>> = ...

    Use BeforeActionClick.

    The same emitter under the old binding name, so a template still binding (beforeActionClick) keeps working. Must stay AFTER BeforeActionClick: class fields initialise in order, and the other way round this captures undefined.

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

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

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

    Use BeforeEventClick.

    The same emitter under the old binding name, so a template still binding (beforeEventClick) keeps working. Must stay AFTER BeforeEventClick: class fields initialise in order, and the other way round this captures undefined.

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

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

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

    Use BeforeEventCollapse.

    The same emitter under the old binding name, so a template still binding (beforeEventCollapse) keeps working. Must stay AFTER BeforeEventCollapse: class fields initialise in order, and the other way round this captures undefined.

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

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

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

    Use BeforeEventExpand.

    The same emitter under the old binding name, so a template still binding (beforeEventExpand) keeps working. Must stay AFTER BeforeEventExpand: class fields initialise in order, and the other way round this captures undefined.

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

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

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

    Use BeforeEventHover.

    The same emitter under the old binding name, so a template still binding (beforeEventHover) keeps working. Must stay AFTER BeforeEventHover: class fields initialise in order, and the other way round this captures undefined.

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

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

    beforeLoad: EventEmitter<BeforeLoadArgs> = ...

    Use BeforeLoad.

    The same emitter under the old binding name, so a template still binding (beforeLoad) keeps working. Must stay AFTER BeforeLoad: class fields initialise in order, and the other way round this captures undefined.

    BeforeLoad: EventEmitter<BeforeLoadArgs> = ...

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

    beforeSegmentCollapse: EventEmitter<BeforeSegmentCollapseArgs> = ...

    Use BeforeSegmentCollapse.

    The same emitter under the old binding name, so a template still binding (beforeSegmentCollapse) keeps working. Must stay AFTER BeforeSegmentCollapse: class fields initialise in order, and the other way round this captures undefined.

    BeforeSegmentCollapse: EventEmitter<BeforeSegmentCollapseArgs> = ...

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

    beforeSegmentExpand: EventEmitter<BeforeSegmentExpandArgs> = ...

    Use BeforeSegmentExpand.

    The same emitter under the old binding name, so a template still binding (beforeSegmentExpand) keeps working. Must stay AFTER BeforeSegmentExpand: class fields initialise in order, and the other way round this captures undefined.

    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.

    Provider: IMetadataProvider | null

    If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

    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.

    "ɵdir": unknown
    "ɵfac": ɵɵFactoryDeclaration<BaseAngularComponent, never>

    Accessors

    • get ProviderToUse(): IMetadataProvider

      Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

      Returns IMetadataProvider

    • get RunQueryToUse(): IRunQueryProvider

      Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

      Returns IRunQueryProvider

    • get RunViewToUse(): IRunViewProvider

      Returns either the default RunView provider or the one specified in the Provider property, if it was specified

      Returns IRunViewProvider

    Methods

    • 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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    ActionsTemplateafterActionClickAfterActionClickafterEventClickAfterEventClickafterEventCollapseAfterEventCollapseafterEventExpandAfterEventExpandafterEventHoverAfterEventHoverafterLoadAfterLoadafterSegmentCollapseAfterSegmentCollapseafterSegmentExpandAfterSegmentExpandAllEventsariaLabelbeforeActionClickBeforeActionClickbeforeEventClickBeforeEventClickbeforeEventCollapseBeforeEventCollapsebeforeEventExpandBeforeEventExpandbeforeEventHoverBeforeEventHoverbeforeLoadBeforeLoadbeforeSegmentCollapseBeforeSegmentCollapsebeforeSegmentExpandBeforeSegmentExpandBodyTemplateCardTemplateDefaultCardConfigemptyIconemptyMessageEmptyTemplateenableKeyboardNavigationFocusedEventIndexHeaderTemplateIsInitializedisLoadingloadingMessageLoadingTemplateProviderScrollContainerScrollStateSegmentHeaderTemplateSegmentssegmentsCollapsiblesegmentsDefaultExpandedVirtualScrollɵdirɵfac
    Accessors
    Methods