DEV Community

loading...
Cover image for Angular Timeline

Angular Timeline

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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'}
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode
<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app