Orientations in Angular Timeline component

4 Sep 20254 minutes to read

The Timeline component supports displaying items in both horizontal and vertical directions using the orientation property. This flexibility allows you to choose the most suitable layout based on your application’s design requirements and available space.

Vertical

Display timeline items vertically in a top-to-bottom sequence by setting the orientation property to Vertical. By default, the items are displayed in vertical orientation.

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 tripItenerary: TimelineItemModel[] = [
    { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in and campsite visit' },
    { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner with music' },
    { content: 'Day 2, 5:30 AM', oppositeContent: 'Sunrise between mountains' },
    { content: 'Day 2, 8:00 AM', oppositeContent: 'Breakfast and check-out' },
  ];

}
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 orientation="Vertical">
        <e-items>
            <e-item *ngFor="let item of tripItenerary" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

Horizontal

Display timeline items horizontally in a left-to-right sequence by setting the orientation property to Horizontal. The horizontal layout works particularly well on desktop screens and wide containers.

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 tripItenerary: TimelineItemModel[] = [
    { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in and campsite visit' },
    { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner with music' },
    { content: 'Day 2, 5:30 AM', oppositeContent: 'Sunrise between mountains' },
    { content: 'Day 2, 8:00 AM', oppositeContent: 'Breakfast and check-out' },
  ];

}
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="margin-top: 50px;">
    <ejs-timeline orientation="Horizontal">
        <e-items>
            <e-item *ngFor="let item of tripItenerary" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';