Items in Angular Timeline component

4 Sep 202516 minutes to read

The Timeline items can be configured by using the <e-item> tag directive. Each item supports multiple configuration options including content, oppositeContent, dotCss, disabled, and cssClass properties to create rich, interactive timeline experiences.

Adding content

Define the primary content for Timeline items using the content property. This property supports both string values and templated content for flexible content presentation.

String content

Define simple text content for Timeline items using string values.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
    imports: [TimelineModule, TimelineAllModule, CommonModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    public orderStatus: TimelineItemModel[] = [
        { content: 'Shipped' },
        { content: 'Departed' },
        { content: 'Arrived' },
        { content: 'Out for Delivery' }
    ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline>
        <e-items>
            <e-item *ngFor="let item of orderStatus" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

Templated content

Create rich, dynamic content for Timeline items by specifying template selectors that reference HTML elements with custom markup and styling.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
    imports: [TimelineModule, TimelineAllModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    public templateContents = [
        { title: 'Shipped', description: 'Package details received', info: '- Awaiting dispatch' },
        { title: 'Departed', description: 'In-transit', info: '(International warehouse)' },
        { title: 'Arrived', description: 'Package arrived at nearest hub', info: '(New york - US)' }
    ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

{% include code-snippet/timeline/items/content/template-based/src/app.component.html %}

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

.content-container {
    position: relative;
    width: 180px;
    padding: 10px;
    margin-left: 5px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    background-color: ghostwhite;
}

.content-container::before {
    content: '';
    position: absolute;
    left: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid silver;
}

.content-container .title {
    font-size: 16px;
}
.content-container .description {
    color: #999999;
    font-size: 12px;
}
.content-container .info {
    color: #999999;
    font-size: 10px;
}

Adding opposite content

Enhance Timeline items with supplementary information using the oppositeContent property. This content appears on the opposite side of the timeline from the main content, providing additional context such as dates, metadata, or secondary details. Like the content property, oppositeContent accepts both string and template values.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
    imports: [TimelineModule, TimelineAllModule, CommonModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    public mealTimes: TimelineItemModel[] = [
        { content: 'Breakfast', oppositeContent: '8:00 AM' },
        { content: 'Lunch', oppositeContent: '1:00 PM' },
        { content: 'Dinner', oppositeContent: '8:00 PM' },
    ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline>
        <e-items>
            <e-item *ngFor="let item of mealTimes" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

Customizing dot appearance

Personalize the visual appearance of Timeline item dots using the dotCss property. This property accepts CSS class names that enable custom styling including icons, background images, colors, and text content.

Adding icons

Apply CSS classes containing icon fonts or icon libraries to display meaningful icons that represent each timeline event or milestone.

Adding images

Incorporate custom images as dot backgrounds by defining CSS classes with background-image properties, perfect for displaying avatars, logos, or event-specific imagery.

Adding text

Display short text labels within dots using CSS classes that define content properties, useful for showing abbreviations, numbers, or status indicators.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
imports: [ TimelineModule, TimelineAllModule, CommonModule ],
standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent  {
    public dotItems: TimelineItemModel[] = [
      { content: 'Default'},
      { content: 'Icon', dotCss: 'e-icons e-check'},
      { content: 'Image', dotCss: 'custom-image'},
      { content: 'Text', dotCss: 'custom-text'}
    ];  
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline>
        <e-items>
            <e-item *ngFor="let item of dotItems" [content]="item.content" [dotCss]="item.dotCss"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

.e-dot.custom-image {
    background-image: url(https://ej2.syncfusion.com/demos/src/listview/images/margaret.png);
}

.e-dot.custom-text::before {
    content: 'A';
}

Disabling items

Control item interactivity using the disabled property. When set to true, the item appears in a disabled state with reduced opacity and becomes non-interactive. The default value is false.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
imports: [ TimelineModule, TimelineAllModule, CommonModule ],
standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {

    public dailyRoutine: TimelineItemModel[] = [
        { content: 'Eat'},
        { content: 'Code'},
        { content: 'Repeat', disabled: true},
    ];

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline>
        <e-items>
            <e-item *ngFor="let item of dailyRoutine" [content]="item.content" [disabled]="item.disabled"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

CSS class customization

Apply custom styling to individual Timeline items using the cssClass property. This property accepts CSS class names that enable comprehensive visual customization including colors, fonts, spacing, and layout modifications.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";

@Component({
    imports: [TimelineModule, TimelineAllModule, CommonModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {

    public dailyRoutine: TimelineItemModel[] = [
        { content: 'Eat', cssClass: 'eat' },
        { content: 'Code', cssClass: 'code' },
        { content: 'Repeat', cssClass: 'repeat' },
    ];

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline>
        <e-items>
            <e-item *ngFor="let item of dailyRoutine" [content]="item.content" [cssClass]="item.cssClass"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

.eat .e-dot,
.eat.e-timeline-item.e-connector::after {
    background-color: aqua;
    border-color: aqua;
}

.code .e-dot,
.code.e-timeline-item.e-connector::after {
    background-color: blue;
    border-color: blue;
}

.repeat .e-dot,
.repeat.e-timeline-item.e-connector::after {
    background-color: yellow;
    border-color: yellow;
}