Global local in Angular Query builder component
26 Apr 202410 minutes to read
The Localization
library allows you to localize default text content of the Query Builder. The Query Builder component has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.
The following list of properties and its values are used in the Query Builder.
Locale key words | Text |
---|---|
AddGroup | Add Group |
AddCondition | Add Condition |
DeleteRule | Remove this condition |
DeleteGroup | Delete group |
Edit | EDIT |
SelectField | Select a field |
SelectOperator | Select operator |
StartsWith | Starts With |
EndsWith | Ends With |
DoesNotStartWith | Does Not Start With |
DoesNotEndWith | Does Not End With |
Contains | Contains |
DoesNotContain | Does Not Contain |
Equal | Equal |
NotEqual | Not Equal |
LessThan | Less Than |
LessThanOrEqual | Less Than Or Equal |
GreaterThan | Greater Than |
GreaterThanOrEqual | Greater Than Or Equal |
Between | Between |
NotBetween | Not Between |
In | In |
NotIn | Not In |
Remove | REMOVE |
ValidationMessage | This field is required |
SummaryViewTitle | Summary View |
OtherFields | Other Fields |
AND | AND |
OR | OR |
SelectValue | Enter Value |
IsEmpty | Is Empty |
IsNotEmpty | Is Not Empty |
IsNull | Is Null |
IsNotNull | Is Not Null |
True | True |
False | False |
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, OnInit } from '@angular/core';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { hardwareData } from './datasource';
setCulture('de-DE');
L10n.load({
'de-DE': {
'querybuilder': {
'AddGroup': 'Gruppe hinzufügen',
'AddCondition': 'Bedingung hinzufügen',
"AddButton": "Gruppe/Bedingung hinzufügen",
'DeleteRule': 'Entfernen Sie diesen Zustand',
'DeleteGroup': 'Gruppe löschen',
'Edit': 'BEARBEITEN',
'SelectField': 'Wählen Sie ein Feld aus',
'SelectOperator': 'Operator auswählen',
'StartsWith': 'Beginnt mit',
'EndsWith': 'Endet mit',
'DoesNotStartWith': 'Beginnt nicht mit',
'DoesNotEndWith': 'Endet nicht mit',
'DoesNotContain': 'Beinhaltet nicht',
'Contains': 'Enthält',
'Equal': 'Gleich',
'NotEqual': 'Nicht gleich',
'LessThan': 'Weniger als',
'LessThanOrEqual': 'Weniger als oder gleich',
'GreaterThan': 'Größer als',
'GreaterThanOrEqual': 'Größer als oder gleich',
'Between': 'Zwischen',
'NotBetween': 'Nicht zwischen',
'In': 'Im',
'NotIn': 'Nicht in',
'Remove': 'LÖSCHEN',
'ValidationMessage': 'Dieses Feld wird benötigt',
'True': 'Wahr',
'False': 'Falsch',
}
}
});
@Component({
imports: [
QueryBuilderModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules" locale="de-DE">
<e-columns>
<e-column field="TaskID" label="Task ID" type="number"></e-column>
<e-column field="Name" label="Name" type="string"></e-column>
<e-column field="Category" label="Category" type="string"></e-column>
<e-column field="SerialNo" label="SerialNo" type="string"></e-column>
<e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
<e-column field="Status" label="Status" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public importRules?: RuleModel;
ngOnInit(): void {
this.data = hardwareData;
this.importRules = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));