Localization in Angular Mention component

14 Nov 20223 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate  properties according to the culture currently assigned to the Mention.

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

Loading translations

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

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

import { Component, OnInit } from '@angular/core';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { L10n } from '@syncfusion/ej2-base';
@Component({
    selector: 'app-root',
    template: `<label id="comment" >Comments</label>
    <div id="mentionElement" placeholder = "Type @ and tag user"></div>
    <ejs-mention [dataSource]='customerData' [fields]='fields' [query]= 'query' [locale]='locale' [target]='mentionTarget'></ejs-mention>`,
    styleUrls: ['index.css']

})
export class AppComponent implements OnInit {
    constructor() {}
    public customerData: DataManager = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    public mentionTarget: string = '#mentionElement';
    public fields: Object = { text: 'ContactName', value: 'CustomerID' };
    public query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
    public locale: string = 'fr-BE';
    ngOnInit(): void {
        L10n.load({
            'fr-BE': {
            'dropdowns': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé",
                }
            }
        });
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

See Also