Filtering in Angular Query builder component
15 Sep 20226 minutes to read
Query Builder allows you to create or delete conditions and groups. You can use showButtons
to enable/disable these buttons.
You can create or delete conditions by interacting through the user interface and methods.
- Use the
addRules
, anddeleteRules
methods to create/delete conditions. - Use
addGroups
, anddeleteGroups
methods to create/delete groups.
import { Component, ViewChild, OnInit } from '@angular/core';
import { RuleModel, QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import { employeeData } from './datasource';
@Component({
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="70%" [dataSource]="data" [rule]="importRules" [showButtons]="showButtons">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>
<button class="e-btn e-primary e-qb-button" (click)="addRule()" >Add Rule</button>
<button class="e-btn e-primary e-qbr-button" (click)="addGroup()" >Add Group</button>
<button class="e-btn e-primary e-qbr-button" (click)="deleteGroup()" >Delete Group</button>`
})
export class AppComponent implements OnInit {
public data: Object[];
public importRules: RuleModel;
@ViewChild('querybuilder')
public qryBldrObj: QueryBuilderComponent;
public showButtons: Object = {ruleDelete: true, groupInsert: true, groupDelete: true};
ngOnInit(): void {
this.data = employeeData;
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
}
addRule(): void {
this.qryBldrObj.addRules([{'label': 'City','field': 'City','type': 'string','operator': 'equal','value': 'US'}], 'group0');
}
addGroup(): void {
this.qryBldrObj.addGroups([{'condition': 'and','rules': [{'label': 'First Name','field': 'FirstName','type': 'string','operator': 'startswith','value': 'v' }]}], 'group0');
}
deleteGroup(): void {
this.qryBldrObj.deleteGroups(['group1']);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder';
import { AppComponent } from './app.component'
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
QueryBuilderModule,
],
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);