Events in Angular Timeline component

13 Jun 20244 minutes to read

This section describes the Timeline events that will be triggered when an 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 is completed.

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 item.

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>