Customization in Angular Timeline component

4 Sep 202518 minutes to read

The Timeline component offers extensive customization options for visual styling including dot appearance, connector lines, borders, spacing, and color schemes. This section demonstrates various approaches to customize Timeline items and create visually distinctive event displays.

Connector styling

Common styling

Define styles that apply to all Timeline item connectors for consistent visual presentation across the entire Timeline.

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

Apply unique styles to specific connectors to differentiate particular items within the Timeline sequence.

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

Adjust dot dimensions using the --dot-size CSS custom property to create visual emphasis or maintain design consistency with different Timeline layouts.

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

Create visually engaging Timeline dots by adding shadow effects using the --dot-outer-space and --dot-border CSS custom properties. These properties control the outer spacing and border appearance of 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: [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

Create different dot appearances by customizing border, outline, and background color properties of Timeline dots. This enables distinct visual styles for different types of events.

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

Apply the e-outline class to the Timeline cssClass property to enable outline-style 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