Having trouble getting help?
Contact Support
Contact Support
Rtl in Angular Query builder component
26 Apr 20245 minutes to read
RTL provides an option to switch the text direction and layout of the Query Builder component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL, set the enableRtl
to true.
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 { L10n, setCulture } from '@syncfusion/ej2-base';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';
import { hardwareData } from './datasource';
setCulture('ar-AE');
L10n.load({
'ar-AE': {
'querybuilder': {
'AddGroup': 'إضافة مجموعة',
'AddCondition': 'اضافة الشرط',
'DeleteRule': 'أزل هذا الشرط',
'DeleteGroup': 'حذف المجموعة',
'Edit': 'تصحيح',
'SelectField': 'اختر مجال',
'SelectOperator': 'حدد المشغل',
'StartsWith': 'ابدا ب',
'EndsWith': 'ينتهي مع',
'Contains': 'يحتوي على',
'Equal': 'مساو',
'NotEqual': 'ليس متساوي',
'LessThan': 'أقل من',
'LessThanOrEqual': 'اصغر من او يساوي',
'GreaterThan': 'أكثر من',
'GreaterThanOrEqual': 'أكبر من أو يساوي',
'Between': 'ما بين',
'NotBetween': 'ليس بينهما',
'In': 'في',
'NotIn': 'ليس في',
'Remove': 'إزالة',
'ValidationMessage': 'هذه الخانة مطلوبه'
}
}
});
@Component({
imports: [
QueryBuilderModule
],
standalone: true,
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules" locale="ar-AE" enableRtl="true">
<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));