Globalization in Angular Chat UI

22 Aug 20257 minutes to read

The Syncfusion Chat UI component is designed with globalization in mind, allowing it to serve users in various regions and languages.

Localization

The Chat UI component can be localized for any culture. The default language is English (en). To adapt the component to another language, you can provide translations for the keys in its default culture file. The placeholders {0} and {1} represent user names, while {2} is used for a numeric count of additional users.

The following table lists the localization keys, their default English text, and an example of their usage.

Key	Default Text	Example Usage
oneUserTyping	{0} is typing	Suresh is typing
twoUserTyping	{0} and {1} are typing	Suresh and Gopi are typing
threeUserTyping	{0}, {1}, and {2} other are typing	Suresh, Gopi, and 1 other are typing
multipleUsersTyping	{0}, {1}, and {2} others are typing	Suresh, Gopi, and 5 others are typing

The following example demonstrates how to load the German (de) culture and apply it to the Chat UI.

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 { L10n } from '@syncfusion/ej2-base';
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 typingUsers: UserModel[] = [this.michaleUserModel];
    public locale?: string;
    public ngOnInit(): void {
        L10n.load({
            'de': {
                "chat-ui": {
                    "oneUserTyping": "{0} tippt",
                    "twoUserTyping": "{0} und {1} tippen",
                    "threeUserTyping": "{0}, {1} und {2} andere tippen gerade",
                    "multipleUsersTyping": "{0}, {1} und {2} andere tippen gerade"
                }
            }
        });
        this.locale =  'de';
    };
}

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" [locale]='locale' [typingUsers]="typingUsers">
    <e-messages>
        <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel"></e-message>
        <e-message text="Yes, the design phase is complete." [author]="michaleUserModel"></e-message>
        <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel"></e-message>
    </e-messages>
</div>

RTL

Right-to-Left (RTL) support provides an option to render the Chat UI component with a right-to-left layout and text direction. This is essential for users of languages such as Arabic, Hebrew, and Persian. You can enable this feature by setting the enableRtl property to true.

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

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