The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate property according to the culture currently assigned to the AutoComplete.
Locale key | en-US (default) |
---|---|
noRecordsTemplate | No Records Found |
actionFailureTemplate | The Request Failed |
To load translation object to your application, use load function of the L10n class.
In the following sample, French culture is set to the AutoComplete 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.
import { Component, OnInit } from '@angular/core';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { L10n } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='data' [query]='query' [fields]='fields' [placeholder]='text' [locale]='locale'></ejs-autocomplete>`
})
export class AppComponent implements onInit {
constructor() {
}
//set the placeholder text in french to AutoComplete input
public text: string = 'Trouver un client';
// bind remotedata to showcase actionFailureTemplate in offline
public data: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
//map the appropriate columns to fields property
public fields: Object = { value: 'ContactName' };
//bind the Query instance to query property
public query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set placeholder to AutoComplete input element
public locale: string = 'fr-BE';
ngOnInit(): void {
L10n.load({
'fr-BE': {
'dropdowns': {
'noRecordsTemplate': "Aucun enregistrement trouvé",
'actionFailureTemplate': "Modèle d'échec d'action"
}
}
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
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);