Angular Timeline

Angular Timeline visualizes a series of chained events.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {TimelineModule} from 'primeng/timeline';

Getting Started

Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation.

import {Component,OnInit} from '@angular/core';
import {PrimeIcons} from 'primeng/api';

@Component({
    templateUrl: './timelinedemo.html'
})
export class TimelineDemo implements OnInit {

    events: any[];

    ngOnInit() {
        this.events = [
            {status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg'},
            {status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'},
            {status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'},
            {status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'}
        ];
    }
}

<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

Layout

Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.

<p-timeline [value]="events" layout="horizontal">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

Alignment

Location of the timeline bar is defined using the align property.

<p-timeline [value]="events" align="right">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

In addition, the "alternate" alignment option make the contents take turns around the timeline bar.

<p-timeline [value]="events" align="alternate">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

Opposite

Content to be placed at the other side of the bar is defined with the opposite template.

<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        <small class="p-text-secondary">{{event.date}}</small>
    </ng-template>
    <ng-template pTemplate="opposite" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

Custom Markers

marker template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.

<p-timeline [value]="events1" align="alternate">
    <ng-template pTemplate="marker" let-event>
        <span class="custom-marker p-shadow-2" [style.backgroundColor]="event.color">
            <i [ngClass]="event.icon"></i>
        </span>
    </ng-template>
    <ng-template pTemplate="content" let-event>
        <p-card [header]="event.status" [subheader]="event.date">
            <img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="p-shadow-2" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
            <button pButton label="Read more" class="p-button-text"></button>
        </p-card>
    </ng-template>
</p-timeline>

Theming

Timeline supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Timeline showcase for demos and documentation.