Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Headless Editor
Image Designer
Kanban Board
PDF Builder
PDF Signer
PDF Viewer
Video Player
GitHub repositoryGitHub starsGitHub forksNgStarter UI npm versionNgStarter UI npm downloads per month

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–