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 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? Provider scrollContainer? scrollState segmentHeaderTemplate? segments segmentsCollapsible segmentsDefaultExpanded virtualScroll ɵdir ɵfac

    Accessors

    allowLoad groups layout orientation ProviderToUse RunQueryToUse RunViewToUse 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.

    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
    Accessors
    Methods