Template in Angular Timeline component

28 Dec 20246 minutes to read

The Timeline component allows you to customize the appearance of each item by using the template. This feature enables you to modify dot items, templated contents, progress bar styling, and more.

The template context receives the following information:

Type	Purpose
item	Indicates the current data of the Timeline item.
itemIndex	Indicates the current index of the Timeline item.

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 projectMilestones: TimelineItemModel[] = [
    { content: 'Kickoff meeting' },
    { content: 'Content approved' },
    { content: 'Design approved' },
    { content: 'Product 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

{% include code-snippet/timeline/template/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';

.container {
    height: 150px; 
    width: 600px; 
    margin: 50px auto;
}

.custom-timeline .e-timeline-item.e-item-template {
    align-items: flex-end;
}
.custom-timeline .e-timeline-items {
    justify-content: center;
}
.template-container .content-connector {
    position: absolute;
    left: 88%;
    width: 3px;
    height: 28px;
}
.template-container .content-container {
    padding: 8px;
    border-width: 1px;
    border-style: solid;
}
.content-container .timeline-content {
    font-size: 14px;
}

/* Color customizations - Progress line, connector line, dot border */
.item-0 .progress-line, .item-0 .content-connector { background-color: rgb(233, 93, 93); }
.item-1 .progress-line, .item-1 .content-connector { background-color: rgba(247, 179, 22, 0.907); }
.item-2 .progress-line, .item-2 .content-connector { background-color: rgb(60, 184, 60); }
.item-3 .progress-line, .item-3 .content-connector { background-color: rgb(153, 29, 230); }

.item-0 .progress-line .indicator, .item-0 .content-container { border-color: rgb(233, 93, 93); }
.item-1 .progress-line .indicator, .item-1 .content-container { border-color: rgba(247, 179, 22, 0.907); }
.item-2 .progress-line .indicator, .item-2 .content-container { border-color: rgb(60, 184, 60); }
.item-3 .progress-line .indicator, .item-3 .content-container { border-color: rgb(153, 29, 230); }

.item-0 .content-container { box-shadow: 2px 2px 8px rgb(233, 93, 93); }
.item-1 .content-container { box-shadow: 2px 2px 8px rgba(247, 179, 22, 0.907); }
.item-2 .content-container { box-shadow: 2px 2px 8px rgb(60, 184, 60); }
.item-3 .content-container { box-shadow: 2px 2px 8px rgb(153, 29, 230); }

/* START --- Customizing Dot and progress line */
.custom-timeline .template-container .indicator {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    border-width: 6px;
    border-style: solid;
    left: 88%;
    transform: translate(-50%, -40%);
    cursor: pointer;
}

.progress-line {
    position: absolute; 
    height: 10px;
    width: 100%;
    left: 0;
    top: 50%;
}
/* END --- Customizing Icon and progress line */