Customization in Angular Timeline component

6 Mar 202518 minutes to read

You can customize the Timeline items dot size, connectors, dot borders, dot outer space and more to personalize its appearance. This section explains the different ways for styling the items.

Connector styling

Common styling

You can define the styles applicable to the all the Timeline item connectors.

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',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {

    public dailyRoutine: TimelineItemModel[] = [
        { content: 'Eat' },
        { content: 'Code' },
        { content: '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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="custom-connector">
        <e-items>
            <e-item *ngFor="let item of dailyRoutine" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.custom-connector .e-timeline-item.e-connector::after {
    border-color: #f7c867;
    border-width: 1.4px;
}

Individual styling

You can also apply unique styles to individual connectors, to differentiate specific items within the Timeline.

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',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {

    public dailyRoutine: TimelineItemModel[] = [
        { content: 'Eat', cssClass: 'state-initial' },
        { content: 'Code', cssClass: 'state-intermediate' },
        { content: '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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="custom-connector">
        <e-items>
            <e-item *ngFor="let item of dailyRoutine" [content]="item.content" [cssClass]="item.cssClass"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.custom-connector .state-initial.e-connector::after {
    border: 1.5px #f8c050 dashed;
}
.custom-connector .state-intermediate.e-connector::after {
    border: 1.5px #4d85f5 dashed;
}

Dot styling

Dot color

You can modify the color of the dots to highlight the specific 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',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public orderStatus: TimelineItemModel[] = [
    { content: 'Ordered', cssClass: 'state-completed' },
    { content: 'Shipped', cssClass: 'state-progress' },
    { content: 'Delivered' }
  ];

}

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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="dot-color">
        <e-items>
            <e-item *ngFor="let item of orderStatus" [content]="item.content" [cssClass]="item.cssClass"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.dot-color .state-completed .e-dot {
    background: #ff9900 ;
    outline: 1px dashed #ff9900;
    border-color: #ff9900;
}
.dot-color .state-progress .e-dot {
    background: #33cc33;
    outline: 1px dashed #33cc33;
    border-color: #33cc33;
}

Dot size

You can adjust the size of the dot to make it larger or smaller by using the --dot-size variable.

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',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public dotSizes: TimelineItemModel[] = [
    { content: 'Extra Small', cssClass: 'x-small' },
    { content: 'Small', cssClass: 'small' },
    { content: 'Medium', cssClass: 'medium' },
    { content: 'Large', cssClass: 'large' }
  ];

}

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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="dot-size">
        <e-items>
            <e-item *ngFor="let item of dotSizes" [content]="item.content" [cssClass]="item.cssClass"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.dot-size .e-dot {
    background: #33cc33;
}
.dot-size .x-small .e-dot {
    --dot-size: 12px;
}
.dot-size .small .e-dot {
    --dot-size: 18px;
}
.dot-size .medium .e-dot {
    --dot-size: 24px;
}
.dot-size .large .e-dot {
    --dot-size: 30px;
}

Dot shadow

You can add shadow effects to the Timeline dots to make it feel visually engaging by using the --dot-outer-space & --dot-border variables.

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',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public orderStatus: TimelineItemModel[] = [
    { content: 'Ordered' },
    { content: 'Shipped' },
    { content: 'Delivered' }
  ];

}

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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="dot-shadow">
        <e-items>
            <e-item *ngFor="let item of orderStatus" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.dot-shadow .e-dot {
    --dot-outer-space: 3px;
    --dot-border: 3px;
    --dot-size: 20px;
    outline-color: #dee2e6;
    border-color: #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5) ,
    2px -2px 4px rgba(255, 255, 255, 0.5) inset;
}

Dot variant

You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots.

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: [CommonModule, TimelineModule, TimelineAllModule],
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public dotVariants: TimelineItemModel[] = [
    { content: 'Filled', cssClass: 'dot-filled' },
    { content: 'Flat', cssClass: 'dot-flat' },
    { content: 'Outlined', cssClass: 'dot-outlined' }
  ];

}

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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="dot-variant">
        <e-items>
            <e-item *ngFor="let item of dotVariants" [content]="item.content" [cssClass]="item.cssClass"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css

.dot-variant .dot-filled .e-dot::before { content: 'A'; color: #fff;}
.dot-variant .dot-flat .e-dot::before { content: 'B'; color: #fff;}
.dot-variant .dot-outlined .e-dot::before { content: 'C';}

.dot-variant .dot-filled .e-dot {
    background: #33cc33;
    --dot-outer-space: 3px;
    outline-color: #81ff05;
    --dot-size: 25px;
}
.dot-variant .dot-flat .e-dot {
    background: #33cc33;
    --dot-size: 25px;
    --dot-radius: 10%;
}
.dot-variant .dot-outlined .e-dot {
    outline-color: #33cc33;
    --dot-outer-space: 3px;
    background-color: unset;
    --dot-size: 25px;
}

Dot outline

By adding the e-outline class to the Timeline cssClass property it enables the dots to have an outline state.

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',
  styleUrls: ['./app.component.css'],
})
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: 250px;margin-top: 30px;">
    <ejs-timeline cssClass="e-outline">
        <e-items>
            <e-item *ngFor="let item of orderStatus" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

app.component.css