Localization in Angular MultiSelect DropDown component

26 Aug 20254 minutes to read

The Localization library allows you to localize static text content of the MultiSelect DropDown component templates according to the culture currently assigned to the component. This enables the component to display appropriate text messages in different languages based on the user’s locale preferences.

The following templates can be localized using the specified locale keys with the noRecordsTemplate and actionFailureTemplate properties:

Locale key en-US (default)
noRecordsTemplate No records found
actionFailureTemplate The request failed
overflowCountTemplate +${count} more..
totalCountTemplate ${count} selected

Loading translations

To load translation object to your application, use the load function of the L10n class. This method registers the localized text for the specified culture and makes it available for the MultiSelect DropDown component.

In the following sample, French culture is set to the MultiSelect DropDown component and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture initially, and if the sample is run offline, the actionFailureTemplate property displays its text appropriately. The overflowCountTemplate displays the overflow count when the maximum selection limit is exceeded, and the totalCountTemplate displays the total count of selected items.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component,OnInit } from '@angular/core';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
// import L10n class for load function
import { L10n,setCulture } from '@syncfusion/ej2-base';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, MultiSelectModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<ejs-multiselect id='multiselectelement' [dataSource]='customerData' [query]='query' [fields]='fields' [placeholder]='text' [locale]='locale'></ejs-multiselect>`
})
export class AppComponent implements OnInit {
    constructor() {
    }
    //set the placeholder text in french to MultiSelect input
    public text: string = "Sélectionnez un élément";
    // bind remotedata to showcase actionFailureTemplate in offline
    public customerData: DataManager = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    // map appropriate column
    public fields: Object = { text: 'ContactName', value: 'CustomerID' };
    // take 0 item to showcase noRecordsTemplate property
    public query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
    //set culture to MultiSelect component
    public locale: string = 'fr-BE';
    ngOnInit(): void {
        L10n.load({
            'fr-BE': {
            'multi-select': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé",
                    'actionFailureTemplate': "Modèle d'échec d'action",
                    'overflowCountTemplate': "+${count} plus..",
                    'totalCountTemplate': "${count} choisi"
                }
            }
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also