A component used for operating with complex filters by creating or editing conditions and grouping them using AND/OR logic. It is used internally in the Advanced Filtering of the Grid.

Example

<igx-query-builder [entities]="this.entities">
</igx-query-builder>

IgxQueryBuilderComponent

new IgxQueryBuilderComponent(): IgxQueryBuilderComponent

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:252

Returns IgxQueryBuilderComponent

Disables subsequent entity changes at the root level after the initial selection.

disableEntityChange: boolean = false

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:189

Disables return fields changes at the root level.

disableReturnFieldsChange: boolean = false

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:207

Event fired as the expression tree is changed.

<igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
expressionTreeChange: EventEmitter<IExpressionTree>

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:217

Gets the locale of the query builder. If not set, defaults to application's locale.

locale: string

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:167

Gets/sets whether the confirmation dialog should be shown when changing entity. Default value is true.

showEntityChangeDialog: boolean = true

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:62

Gets the list of entities available for the query builder.

Each entity describes a logical group of fields that can be used in queries. An entity can optionally have child entities, allowing nested sub-queries.

get entities(): EntityType[]

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:72

Returns EntityType[]

Sets the list of entities for the query builder. If the expressionTree is defined, it will be recreated with the new entities.

Each entity should be an EntityType object describing the fields and optionally child entities.

Example:

[
  {
    name: 'Orders',
    fields: [{ field: 'OrderID', dataType: 'number' }],
    childEntities: [
      {
        name: 'OrderDetails',
        fields: [{ field: 'ProductID', dataType: 'number' }]
      }
    ]
  }
]
set entities(entities: EntityType[]): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:101

Parameters

  • entities: EntityType[] -

    The array of entities to set.

Returns void

Sets the expression tree.

set expressionTree(expressionTree: IExpressionTree): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:152

Parameters

Returns void

Sets the resource strings. By default it uses EN resources.

set resourceStrings(value: IQueryBuilderResourceStrings): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:174

Parameters

Returns void

get searchValueTemplate(): TemplateRef<IgxQueryBuilderSearchValueContext>

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:199

Returns TemplateRef<IgxQueryBuilderSearchValueContext>

Sets/gets the search value template.

set searchValueTemplate(template: TemplateRef<IgxQueryBuilderSearchValueContext>): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:195

Parameters

  • template: TemplateRef<IgxQueryBuilderSearchValueContext>

Returns void

Returns whether the expression tree can be committed in the current state.

canCommit(): boolean

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:262

Returns boolean

Commits the expression tree in the current state if it is valid. If not throws an exception.

commit(): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:269

Returns void

Discards all unsaved changes to the expression tree.

discard(): void

Defined in projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:282

Returns void