Localization in EJ2 TypeScript Dialog control

8 May 20233 minutes to read

Localization library allows to localize the default text content of Dialog. In Dialog, The close button’s tooltip text alone will be localize based on culture. By using locale property you can the culture dynamically in dialog component.

Locale key en-US (default)
close Close

Loading translations

To load translation object in an application use load function of L10n class.

In the below sample, French culture is set to Dialog and change the close button’s tooltip text.

import { Dialog } from '@syncfusion/ej2-popups';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Load French culture for Dialog close button tooltip text
L10n.load({
    'fr-BE': {
       'dialog': {
             'close': "Fermer"
         }
     }
});

// Initialization of Dialog component
let dialog = new Dialog({
    // Set the locale culture
    locale: 'fr-BE',
    // Enables the header
    header: 'Dialogue',
    // Enables the close icon button in header
    showCloseIcon: true,
    // Dialog content
    content: 'Dialogue avec la culture française',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',
});

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = (): void => {
    // Call the show method to open the Dialog
     dialog.show();
}
// Render initialized Dialog
dialog.appendTo('#dialog');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dialog with locale support</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/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'>
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button>
        <div id='dialog'></div>
    </div>
</body>
</html>