Reverse in Angular Timeline component

28 Dec 20242 minutes to read

You can display the Timeline items in reverse order for different alignments by using the reverse property. This feature provides adaptability and improves user interaction.

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',
})

export class AppComponent {

  public careerProgress: TimelineItemModel[] = [
    { content: 'June 2022', oppositeContent: 'Graduated \n Bachelors in Computer Engineering' },
    { content: 'Aug 2022', oppositeContent: 'Software Engineering Internship \n ABC Software and Technology' },
    { content: 'Feb 2023', oppositeContent: 'Associate Software Engineer \n ABC Software and Technology' },
    { content: 'Mar 2024', oppositeContent: 'Software Level 1 Engineer \n XYZ Solutions' },
  ];

}

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: 330px;margin-top: 30px;">
    <ejs-timeline reverse="true" align="Before">
        <e-items>
            <e-item *ngFor="let item of careerProgress" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';