Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Timeline

The ngs-timeline component displays events in a vertical chronological flow. Use it when the order of events matters and users need to understand what happened, when it happened, who did it, and which metadata belongs to each event.

Key Features:
  • Chronological layout: Show activity history, audit logs, milestones, and tracking events.
  • Structured items: Add title, subtitle, description, timestamp, attributes, and custom content.
  • Custom indicators: Use the default marker or provide a custom icon/avatar through ngsTimelineItemIndicator.
  • Date grouping: Use ngs-timeline-header to group events by day, month, phase, or another time period.

The NgStarter Angular Timeline component lets you show a vertical chronological history of events. Use ngs-timeline when users need to understand a sequence of events over time: audit logs, activity history, entity change history, project milestones, order or shipment history, workflow history, tracking events, and user actions. It includes examples for Basic Timeline, Timeline With Timestamp, Timeline With Custom Indicator, and Timeline timestamp.

Basic Timeline

Use a basic timeline for activity history, audit logs, milestones, and other chronological event lists.

1 AUG, 2023
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
JS
James Collins
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
JS
James Collins
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
JS
James Collins
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
JS
James Collins

Timeline With Timestamp

Add timestamps when users need to scan exactly when each event happened inside the sequence.

1 AUG, 202311, July
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
J
James Collins
03, July
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
J
James Collins
25, June
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
J
James Collins
22, June
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
J
James Collins

Timeline With Custom Indicator

Use custom indicators when the marker should show the actor, event type, status, or another visual cue.

1 AUG, 202311, July
J
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
03, July
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
25, June
J
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.
22, June
J
Created "ngsimaKit in Angular" taskFind more detailed insctructions here.