Items in Angular Timeline component

28 Dec 202415 minutes to read

The Timeline items can be added by using the <e-item> tag directive. Each item can be configured with options such as content, oppositeContent, dotCss, disabled and cssClass.

Adding content

You can define the item content using the content property.

String content

You can define string content for the Timeline items.

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

You can specify the template content for the items, by using the selector for an element in HTML.

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

You can add additional information to each Timeline item, by using the oppositeContent property which is positioned opposite to the item content. Similar to the content property you can define string or function as contents to the oppositeContent.

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';

Dot item

You can define a CSS class to personalize the appearance of dots associated with each Timeline item by using the dotCss property. This allows you to set icons, background colors, or images for the dots.

Adding icons

You can define the CSS class to show the icon for each item using the dotCss property.

Adding images

You can include images for the Timeline items using the dotCss property, by setting the CSS background-image property.

Adding text

You can display text for the Timeline items using the dotCss property, by adding text to the CSS content property.

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

You can use the disabled property to disable an item when set to true. By default, the 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';

cssClass

You can customize the appearance of the Timeline item by specifying a custom CSS class using the cssClass property.

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;
}