Globalization in Angular Chat UI

21 Jan 20256 minutes to read

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

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

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.

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>