Time break in Angular Chat UI component

21 Jan 20252 minutes to read

Show or hide time break

You can use the showTimeBreak property to display date-wise separations between all the messages which enhances the readability and message organizing. The default value is false, indicating time breaks are disabled unless it is enabled.

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChatUIModule } from '@syncfusion/ej2-angular-interactive-chat';
import { UserModel } from '@syncfusion/ej2-interactive-chat';
import { Component } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
    public timeStamp1: Date = new Date("December 25, 2024 7:30");
    public timeStamp2: Date = new Date("December 25, 2024 8:00");
    public timeStamp3: Date = new Date("December 25, 2024 11:00");
}

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 id="chatui" ejs-chatui [user]="currentUserModel" [showTimeBreak]="true">
    <e-messages>
        <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel" [timeStamp]="timeStamp1"></e-message>
        <e-message text="Yes, the design phase is complete." [author]="michaleUserModel" [timeStamp]="timeStamp2"></e-message>
        <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel" [timeStamp]="timeStamp3"></e-message>
    </e-messages>
</div>

Time break template

Refer to the Templates section for more details about the Time break template.