Integrated latest changes at 12-12-2024 1:30:12 AM

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -554,6 +554,19 @@
     Chat UI
     <ul>
         <li><a href="/ej2-angular/chat-ui/getting-started">Getting Started</a></li>
+        <li><a href="/ej2-angular/chat-ui/messages">Messages</a></li>
+        <li><a href="/ej2-angular/chat-ui/timebreak">Time break</a></li>
+        <li><a href="/ej2-angular/chat-ui/timestamp">Timestamp</a></li>
+        <li><a href="/ej2-angular/chat-ui/typing-indicator">Typing indicator</a></li>
+        <li><a href="/ej2-angular/chat-ui/load-on-demand">Load on-demand</a></li>
+        <li><a href="/ej2-angular/chat-ui/header">Header</a></li>
+        <li><a href="/ej2-angular/chat-ui/footer">Footer</a></li>
+        <li><a href="/ej2-angular/chat-ui/templates">Templates</a></li>
+        <li><a href="/ej2-angular/chat-ui/appearance">Appearance</a></li>
+        <li><a href="/ej2-angular/chat-ui/globalization">Globalization</a></li>
+        <li><a href="/ej2-angular/chat-ui/accessibility">Accessibility</a></li>
+        <li><a href="/ej2-angular/chat-ui/methods">Methods</a></li>
+        <li><a href="/ej2-angular/chat-ui/events">Events</a></li>
     </ul>
 </li><li>
     CheckBox

ej2-angular/chat-ui/accessibility.md

@@ -0,0 +1,80 @@
+---
+layout: post
+title: Accessibility in Angular Chat UI component | Syncfusion
+description: Learn here all about Accessibility in Syncfusion Angular Chat UI component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility in Angular Chat UI component
+
+The Chat UI component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+
+The accessibility compliance for the Chat UI component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+
+## WAI-ARIA attributes
+
+The following ARIA attributes are used in the Chat UI component:
+
+| Attributes | Purpose |
+| ------------ | ----------------------- |
+| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. |
+| `role=toolbar` | Specifies that the element is a toolbar. |
+| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
+| `aria-orientation` | Specifies the orientation of the toolbar. |
+| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. |
+| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. |
+
+## Keyboard interaction
+
+The following keyboard shortcuts are supported by the Chat UI component.
+
+| **Press** | **To do this** |
+| --- | --- |
+| <kbd>Enter</kbd> | Select the focused item or send a message when the input is focused. |
+| <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
+| <kbd>Shift + Tab</kbd> | Moves focus backward through the interactive elements. |
+| <kbd>Page Up</kbd> | Scroll up through chat history. |
+| <kbd>Page Down</kbd> | Scroll down through chat history. |
+| <kbd>Ctrl + Home</kbd> | Scroll to the first message. |
+| <kbd>Ctrl + End</kbd> | Scroll to the most recent message. |
+<b>Chat UI Toolbars</b>||
+| <kbd>Left Arrow</kbd> | Focuses the previous toolbar element.  |
+| <kbd>Right Arrow</kbd> | Focuses the next toolbar element. |
+| <kbd>Enter / Space</kbd> | Select the focused item or activate the selected option. |
+| <kbd>Home</kbd> | Moves focus to the first toolbar element. |
+| <kbd>End</kbd> | Moves focus to the last toolbar element. |
+
+## Ensuring accessibility
+
+The Chat UI component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+
+## See also
+
+* [Accessibility in Syncfusion components](../common/accessibility)

ej2-angular/chat-ui/appearance.md

@@ -0,0 +1,27 @@
+---
+layout: post
+title: Appearance in Angular Chat UI component | Syncfusion
+description:  Checkout and learn about Appearance with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Appearance in Angular Chat UI component
+
+## Setting placeholder
+
+You can use the `placeholder` property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
+
+## Setting width
+
+You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+
+## Setting height
+
+You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+
+## Setting CSS Class
+
+You can use the `cssClass` property to customize the appearance of the chat UI component.

ej2-angular/chat-ui/events.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Events in Angular Chat UI component | Syncfusion
+description:  Checkout and learn about Events with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Events in Angular Chat UI component
+
+This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component.
+
+## Created
+
+The Chat UI component triggers the `created` event when the component rendering is completed.
+
+## Sending message
+
+The `messageSend` event is triggered before sending a message in the Chat UI component.
+
+## User Typing
+
+The `userTyping` event is triggered when the user is typing a message in the Chat UI component.

ej2-angular/chat-ui/footer.md

@@ -0,0 +1,19 @@
+---
+layout: post
+title: Footer in Angular Chat UI component | Syncfusion
+description:  Checkout and learn about Footer with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Footer in Angular Chat UI component
+
+## Show or hide footer
+
+You can use showFooter property to enable or disable the chat footer.
+
+## Footer template
+
+> Refer to the [Templates](./templates#footer-template) section for more details about the Footer template.

ej2-angular/chat-ui/getting-started.md

@@ -119,11 +119,11 @@ This can be referenced in [src/styles.css] using following code.
 
 ```css
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import '../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-interactive-chat/styles/material.css';
 ```
 
 ## Adding Chat UI component
@@ -166,7 +166,7 @@ The following example illustrates the output in your browser.
 
 ## Configure messages and user
 
-You can use the `messages` property to add messages and the `user` property to configure the current user for the chat.
+You can use the `<e-messages>` tag directive to group all the messages and `<e-message>` tag to define each message and the `user` property to configure the current user for the chat.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}

ej2-angular/chat-ui/globalization.md

@@ -0,0 +1,26 @@
+---
+layout: post
+title: Globalization in Angular Chat UI component | Syncfusion
+description:  Checkout and learn about Globalization with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Globalization in Angular Chat UI
+
+## Localization
+ 
+The Chat UI can be localized to any culture by defining the text of the Chat UI in the corresponding culture. The default locale of the Chat UI is `en` (English). The following table represents the default text of the Chat UI in `en` culture.
+ 
+|KEY|Text|
+|----|----|
+|oneUserTyping|{0} is typing|
+|twoUserTyping|{0} and {1} are typing|
+|threeUserTyping|{0}, {1}, and {2} other are typing|
+|multipleUsersTyping|{0}, {1}, and {2} others are typing|
+ 
+## RTL
+ 
+RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the `enableRtl` property to `true`.

ej2-angular/chat-ui/header.md

@@ -0,0 +1,142 @@
+---
+layout: post
+title: Header in Angular Chat UI component | Syncfusion
+description: Checkout and learn about Header with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Header in Angular Chat UI component
+
+## Show or hide header
+
+You can use `showHeader` property to enable or disable the chat header. It contains the following options `headerText` and `headerIconCss`. 
+
+### Setting header text
+
+You can use the `headerText` property to display the text that appears in the header, which indicates the current username or the group name providing the context for the conversation.
+
+### Setting header icon CSS
+
+You can use the `headerIconCss` property to customize the styling of the header icon.
+
+## Toolbar
+
+You can render the Chat UI toolbar items by using the items property in the headerToolbar.
+
+### Setting Items
+
+Items can be constructed with the following built-in command types or item template.
+
+#### Adding icon CSS
+
+You can customize the header toolbar icons by using the `iconCss` property.
+
+#### Setting item type
+
+You can change the header toolbar item type by using the `type` property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`.
+
+In the following example, header toolbar item type is set as `Button`.
+
+#### Setting text
+
+You can use the `text` property to set the text for the header toolbar item.
+
+#### Show or hide toolbar item
+
+You can use the `visible` property to specify whether to show or hide the header toolbar item. By default, its value is `true`.
+
+#### Setting disabled
+
+You can use the `disabled` property to disable the header toolbar item. By default, its value is `false`.
+
+#### Setting tooltip text
+
+You can use the `tooltip` property to specify the tooltip text to be displayed on hovering the header toolbar item.
+
+#### Setting Css Class
+
+You can use the `cssClass` property to customize the header toolbar item.
+
+#### Setting alignment
+
+You can change the alignment of toolbar item by using the `align` property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`.
+
+In the following example, toolbar item type is set with `Right`.
+
+#### Enabling tab key navigation in toolbar
+
+You can use the `tabIndex` property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well.
+
+To use the `tabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `tabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item.
+
+For example, to enable tab key navigation for two Toolbar items you can use the following code:
+
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { ChatUIComponent, ToolbarSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';
+
+@Component({
+    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
+    standalone: true,
+    selector: 'app-root',
+    // specifies the template string for the Chat UI component
+    template: `<div ejs-chatui #chatUI [headerToolbar]="headerToolbar"></div>`
+})
+
+export class AppComponent {
+    @ViewChild('chatUIComponent')
+    public chatUIComponent!: ChatUIComponent;
+
+    public headerToolbar: ToolbarSettingsModel = {
+        items: [
+            { text: "Item 1", tabIndex: 1 },
+            { text: "Item 2", tabIndex: 2 }
+        ]
+    };
+}
+
+```
+
+With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the `tabIndex` values.
+
+If you set the `tabIndex` value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the `tabIndex` values. For example:
+
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { ChatUIComponent, ToolbarSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';
+
+@Component({
+    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
+    standalone: true,
+    selector: 'app-root',
+    // specifies the template string for the Chat UI component
+    template: `<div ejs-chatui #chatUI [headerToolbar]="headerToolbar"></div>`
+})
+
+export class AppComponent {
+    @ViewChild('chatUIComponent')
+    public chatUIComponent!: ChatUIComponent;
+
+    public headerToolbar: ToolbarSettingsModel = {
+        items: [
+            { text: "Item 1", tabIndex: 0 },
+            { text: "Item 2", tabIndex: 0 }
+        ]
+    };
+
+}
+
+```
+
+In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM.
+
+#### Setting template
+
+You can use the `template` property to add custom toolbar item in the Chat UI component.
+
+### Item clicked
+
+You can define `itemClicked` event in the `headerToolbar` property which will be triggered when the header toolbar item is clicked.

ej2-angular/chat-ui/load-on-demand.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Load on-demand in Angular Chat UI component | Syncfusion
+description:  Checkout and learn about Load on-demand with Angular Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-angular
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load on-demand in Angular Chat UI component
+
+You can use the `loadOnDemand` property to load messages dynamically when the scroll reaches the top of the message list improving performance and reducing load times, particularly in long conversations. This ensures a smooth user experience by only fetching messages as needed rather than loading the entire conversation at once.