Contents
- Show or hide time breaks
- Time break template
Having trouble getting help?
Contact Support
Contact Support
Time breaks in EJ2 TypeScript Chat UI control
17 Dec 20243 minutes to read
Show or hide time breaks
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.
import { ChatUI, UserModel, MessageModel } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
let currentUserModel: UserModel = {
id: "user1",
user: "Albert"
};
let michaleUserModel: UserModel = {
id: "user2",
user: "Michale Suyama"
};
let chatMessages: MessageModel[] = [
{
author: currentUserModel,
text: "Hi Michale, are we on track for the deadline?",
timeStamp: new Date("December 25, 2024 7:30")
},
{
author: michaleUserModel,
text: "Yes, the design phase is complete.",
timeStamp: new Date("December 25, 2024 8:00")
},
{
author: currentUserModel,
text: "I’ll review it and send feedback by today.",
timeStamp: new Date("December 25, 2024 11:00")
}
];
// Initializes the Chat UI control
let chatUI: ChatUI = new ChatUI({
messages: chatMessages,
user: currentUserModel,
showTimeBreak: true
});
// Render initialized Chat UI.
chatUI.appendTo('#showTimeBreak');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Chat UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Chat UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 380px; width: 450px;">
<div id="showTimeBreak"></div>
</div>
</body>
</html>
Time break template
Refer to the Templates section for more details about the time break template.