Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

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.