Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate properties according to the culture currently assigned to the DropDownList.
| 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 DropDownList 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 DropDownList component
template: `<ejs-dropdownlist id='ddlelement' #samples [dataSource]='data' [query]='query' [fields]='fields' [placeholder]='text' [locale]='locale'></ejs-dropdownlist>`
})
export class AppComponent implements onInit {
constructor() {
}
//set the placeholder text in french to DropDownList input
public text: string = "Sélectionnez un élément";
// 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 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 DropDownList component
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 { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, DropDownListModule, 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);