Alignment in Angular Timeline component

4 Mar 202610 minutes to read

The Timeline component controls content positioning using the align property, which accepts values Before, After, Alternate, or AlternateReverse. When items include both content and oppositeContent properties, the oppositeContent displays parallel to the main content, creating a balanced layout on opposite sides of the timeline.

Before

The Before alignment positions content based on orientation. For horizontal orientation, the main content appears at the top with oppositeContent at the bottom. For vertical orientation, content is positioned on the left side while oppositeContent appears on the right side.

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 frameworks: TimelineItemModel[] = [
        { content: 'ReactJs', oppositeContent: 'Owned by Facebook' },
        { content: 'Angular', oppositeContent: 'Owned by Google' },
        { content: 'VueJs', oppositeContent: 'Owned by Evan you' },
        { content: 'Svelte', oppositeContent: 'Owned by Rich Harris' }
    ];
}

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 align="Before">
        <e-items>
            <e-item *ngFor="let item of frameworks" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

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

After

The After alignment reverses the content positioning compared to Before alignment. For horizontal orientation, the main content is placed at the bottom with oppositeContent at the top. For vertical orientation, content appears on the right side while oppositeContent is positioned on the left side.

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 frameworks: TimelineItemModel[] = [
        { content: 'ReactJs', oppositeContent: 'Owned by Facebook' },
        { content: 'Angular', oppositeContent: 'Owned by Google' },
        { content: 'VueJs', oppositeContent: 'Owned by Evan you' },
        { content: 'Svelte', oppositeContent: 'Owned by Rich Harris' }
    ];
}

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 align="After">
        <e-items>
            <e-item *ngFor="let item of frameworks" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

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

Alternate

The Alternate alignment creates a dynamic zigzag pattern where timeline items switch positions alternately. This arrangement provides visual variety and works effectively for showcasing parallel events or comparisons in both horizontal or vertical orientations.

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 frameworks: TimelineItemModel[] = [
        { content: 'ReactJs', oppositeContent: 'Owned by Facebook' },
        { content: 'Angular', oppositeContent: 'Owned by Google' },
        { content: 'VueJs', oppositeContent: 'Owned by Evan you' },
        { content: 'Svelte', oppositeContent: 'Owned by Rich Harris' }
    ];
}

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 align="Alternate">
        <e-items>
            <e-item *ngFor="let item of frameworks" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

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

Alternate reverse

The AlternateReverse alignment creates the reverse pattern of Alternate alignment, where timeline items are arranged in reverse alternating order. This provides another visual variation for displaying data with an inverted alternating pattern, maintaining effectiveness across both Timeline orientations.

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 frameworks: TimelineItemModel[] = [
        { content: 'ReactJs', oppositeContent: 'Owned by Facebook' },
        { content: 'Angular', oppositeContent: 'Owned by Google' },
        { content: 'VueJs', oppositeContent: 'Owned by Evan you' },
        { content: 'Svelte', oppositeContent: 'Owned by Rich Harris' }
    ];
}

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 align="AlternateReverse">
        <e-items>
            <e-item *ngFor="let item of frameworks" [content]="item.content" [oppositeContent]="item.oppositeContent"> </e-item>
        </e-items>
    </ejs-timeline>
</div>

styles.css

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