Overview
The Timeline component visualizes events in chronological order. It supports horizontal and vertical layouts, custom markers, and flexible content templates for displaying event details.
Import
import { MagaryTimeline } from 'ng-magary';
Basic Usage
import { Component } from '@angular/core';
import { MagaryTimeline } from 'ng-magary';
@Component({
selector: 'app-timeline-demo',
standalone: true,
imports: [MagaryTimeline],
template: `
<magary-timeline [value]="events" layout="vertical" align="left">
<ng-template #content let-event>
<div class="timeline-content">
<h4>{{ event.title }}</h4>
<p>{{ event.description }}</p>
<small>{{ event.date }}</small>
</div>
</ng-template>
</magary-timeline>
`
})
export class TimelineDemoComponent {
events = [
{ title: 'Order Placed', description: 'Your order has been placed', date: '2024-01-15' },
{ title: 'Order Shipped', description: 'Your order has been shipped', date: '2024-01-16' },
{ title: 'Order Delivered', description: 'Your order has been delivered', date: '2024-01-18' }
];
}
Horizontal Layout
<magary-timeline [value]="events" layout="horizontal" align="top">
<ng-template #content let-event>
<div class="event-card">
<h4>{{ event.title }}</h4>
<p>{{ event.date }}</p>
</div>
</ng-template>
</magary-timeline>
Alternate Alignment
<magary-timeline [value]="events" layout="vertical" align="alternate">
<ng-template #content let-event>
<div class="timeline-content">
<h4>{{ event.title }}</h4>
<p>{{ event.description }}</p>
</div>
</ng-template>
<ng-template #opposite let-event>
<small class="text-muted">{{ event.date }}</small>
</ng-template>
</magary-timeline>
Custom Markers
<magary-timeline [value]="events" layout="vertical">
<ng-template #content let-event>
<div class="timeline-content">
<h4>{{ event.title }}</h4>
<p>{{ event.description }}</p>
</div>
</ng-template>
<ng-template #marker let-event>
<div class="custom-marker" [class.completed]="event.completed">
<i [class]="event.icon"></i>
</div>
</ng-template>
</magary-timeline>
Properties
Array of events to display in the timeline.
layout
'vertical' | 'horizontal'
default:"'vertical'"
Timeline orientation.
align
'left' | 'right' | 'top' | 'bottom' | 'alternate'
default:"'left'"
Content alignment. For vertical: left, right, or alternate. For horizontal: top, bottom, or alternate.
Templates
The Timeline supports three content templates:
content
Main content for each timeline event (required).
<ng-template #content let-event>
<div>{{ event.title }}</div>
</ng-template>
opposite
Content displayed on the opposite side (optional, useful with alternate alignment).
<ng-template #opposite let-event>
<small>{{ event.date }}</small>
</ng-template>
marker
Custom marker content (optional, defaults to a styled dot).
<ng-template #marker let-event>
<div class="custom-marker">
<i class="icon-{{ event.type }}"></i>
</div>
</ng-template>
Layout Examples
Vertical Left-Aligned
<magary-timeline [value]="events" layout="vertical" align="left">
<ng-template #content let-event>
<div class="p-3 bg-white rounded shadow">
<h5 class="font-semibold">{{ event.title }}</h5>
<p class="text-sm text-gray-600">{{ event.description }}</p>
<time class="text-xs text-gray-400">{{ event.date }}</time>
</div>
</ng-template>
</magary-timeline>
Vertical Alternate
<magary-timeline [value]="events" layout="vertical" align="alternate">
<ng-template #content let-event>
<div class="event-card">
<h5>{{ event.title }}</h5>
<p>{{ event.description }}</p>
</div>
</ng-template>
<ng-template #opposite let-event>
<time>{{ event.date }}</time>
</ng-template>
<ng-template #marker let-event>
<div class="marker" [style.background-color]="event.color">
{{ event.index }}
</div>
</ng-template>
</magary-timeline>
Horizontal Timeline
<magary-timeline [value]="events" layout="horizontal" align="top">
<ng-template #content let-event>
<div class="step">
<h6>{{ event.title }}</h6>
<p>{{ event.date }}</p>
</div>
</ng-template>
<ng-template #marker let-event>
<div class="step-number">{{ event.step }}</div>
</ng-template>
</magary-timeline>
Use Cases
- Order Tracking: Display order status updates
- Project Milestones: Show project progress timeline
- Activity Feed: Display user activity history
- Process Steps: Visualize multi-step processes
- Historical Events: Show chronological events
Styling
The timeline uses these CSS classes:
magary-timeline - Main containermagary-timeline-vertical - Vertical layoutmagary-timeline-horizontal - Horizontal layoutmagary-timeline-left - Left alignmentmagary-timeline-right - Right alignmentmagary-timeline-alternate - Alternate alignmentmagary-timeline-event - Individual eventmagary-timeline-event-content - Event contentmagary-timeline-event-opposite - Opposite contentmagary-timeline-event-separator - Marker separatormagary-timeline-event-marker - Event markermagary-timeline-event-connector - Line connector
Custom Styling Example
.magary-timeline-event-marker {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--primary-color);
border: 2px solid var(--surface-card);
}
.magary-timeline-event-connector {
background: var(--surface-border);
width: 2px;
}
.magary-timeline-event-content {
padding: 1rem;
background: var(--surface-card);
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
Accessibility
- The timeline uses a semantic structure
- Content is presented in a logical reading order
- Markers have appropriate visual indicators
- Text content is accessible to screen readers
Source
View source: projects/ng-magary/src/lib/Data/timeline/timeline.ts:69