Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
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.
PropTypeDefault
ngs-timeline
Main container for timeline headers and items.
component
ngs-timeline-item
One event or entry in the timeline.
component
ngs-timeline-header
Group heading for timeline items, often a date or period.
component
ngs-timeline-title
Primary title for the timeline event.
component
ngs-timeline-subtitle
Secondary title or supporting line for the event.
component
ngs-timeline-description
Short event description.
component
ngs-timeline-timestamp
Time or date label for the event.
component
ngs-timeline-attributes
Extra metadata, actor details, links, badges, or attributes for the event.
component
ngsTimelineItemIndicator
Template directive for a custom event indicator.
directive