Orientations in Angular Timeline component

28 Dec 20244 minutes to read

The Timeline component supports the display of items in both the horizontal and vertical direction by using the orientation property.

Vertical

You can display the items vertically, one below the other, by setting the orientation property to Vertical. By default, the items are displayed in vertical orientation.

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 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' },
  ];

}

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 orientation="Vertical">
        <e-items>
            <e-item *ngFor="let item of tripItenerary" [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';

Horizontal

You can display the items horizontally, in a side-by-side manner, by setting the orientation property to Horizontal.

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 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' },
  ];

}

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="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>

styles.css

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