Localization in Angular MultiColumn ComboBox component

14 Jun 20243 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate property according to the culture currently assigned to the MultiColumn ComboBox.

Locale key	en-US (default)
noRecordsTemplate	No records found

Loading translations

To load translation object to your application, use load function of L10n class.

In the following sample, French culture is set to the MultiColumn ComboBox and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture.

app.component.ts

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



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';
import { L10n } from '@syncfusion/ej2-base';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='[]' [placeholder]='waterMark' [locale]='locale'>
                  <e-columns>
                    <e-column field='ContactName' header='Contact Name' width='90'></e-column>
                    <e-column field='CustomerID' header='Customer ID' width='120'></e-column>
                  </e-columns>
              </ejs-multicolumncombobox>`
})
export class AppComponent {
  public waterMark: string = 'Sélectionnez un client';
  //set culture to MultiColumn ComboBox component
  public locale: string = 'fr-BE';
  ngOnInit(): void {
      L10n.load({
          'fr-BE': {
          'multicolumncombobox': {
                  'noRecordsTemplate': "Aucun enregistrement trouvé",
              }
          }
      });
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));