Localization in EJ2 TypeScript AutoComplete

04 Sep 20264 minutes to read

The Localization library allows you to localize the static text content displayed by the noRecordsTemplate and actionFailureTemplate properties according to the culture currently assigned to the AutoComplete.

Locale key en-US (default)
noRecordsTemplate No Records Found
actionFailureTemplate The Request Failed

Loading translations

To load a translation object into your application, use the load function of the L10n class.

In the following sample, the French culture is assigned to the AutoComplete and no data is loaded. As a result, the noRecordsTemplate property displays its text in French initially. If the sample is run offline, the actionFailureTemplate property displays the corresponding localized text.

import { AutoComplete } from '@syncfusion/ej2-dropdowns';
// import L10n class for load function
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

let atcObj: AutoComplete = new AutoComplete({
    // bind remote data to showcase actionFailureTemplate in offline.
    dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    }),
    //bind the Query instance to query property
    query: new Query().select(['ContactName', 'CustomerID']).take(0),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName' },
    // set locale culture to AutoComplete
    locale: 'fr-BE',
    // set placeholder to AutoComplete input element
    placeholder: 'Trouver un client'
});
atcObj.appendTo('#atcelement');

L10n.load({
    'fr-BE': {
        'dropdowns': {
            'noRecordsTemplate': "Aucun enregistrement trouvé",
            'actionFailureTemplate': "Modèle d'échec d'action"
        }
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/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>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id='atcelement' />
    </div>
</body>

</html>

See Also