Events in Angular Timeline component

4 Sep 20254 minutes to read

This section describes the Timeline events that trigger when appropriate actions are performed. The following events are available in the Timeline component.

created

The Timeline component triggers the created event when the component rendering process is completed and the Timeline is ready for interaction.

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 productLifecycle: TimelineItemModel[] = [
        { content: 'Planning'},
        { content: 'Developing'},
        { content: 'Testing' },
        { content: 'Launch' },
    ];

    handleTimelineCreated = () => {
    //your required action here 
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline (created)="handleTimelineCreated()">
        <e-items>
            <e-item *ngFor="let item of productLifecycle" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

beforeItemRender

The Timeline component triggers the beforeItemRender event before rendering each timeline item, allowing customization of individual items during the rendering process.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TimelineItemModel, TimelineRenderingEventArgs, 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 productLifecycle: TimelineItemModel[] = [
        { content: 'Planning'},
        { content: 'Developing'},
        { content: 'Testing' },
        { content: 'Launch' },
    ];
    
    handleBeforeItemRender = (args: TimelineRenderingEventArgs) => {
    //your required action here 
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline (beforeItemRender)="handleBeforeItemRender($event)">
        <e-items>
            <e-item *ngFor="let item of productLifecycle" [content]="item.content"> </e-item>
        </e-items>
    </ejs-timeline>
</div>