How to show the summary view in Angular Query Builder UI

1 Sep 20266 minutes to read

The summary view displays a human-readable representation of the constructed query. By default, the summaryView property is false, so the summary view is hidden. Enable it by setting the property to true.

The summaryView property accepts a boolean. You can set it either as a string attribute (summaryView="true") or via property binding ([summaryView]="true") depending on whether the value is a literal or a component expression.

Behavior

When summaryView is enabled, the Query Builder renders the rule view alongside the summary content: a read-only text area showing the constructed query, and an Edit button that collapses the summary back to the rule view. The collapse indicator uses the SummaryViewTitle locale key (documented in Localization) as its tooltip, so the summary view’s collapse text can be localized along with the rest of the component’s UI strings.

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 { employeeData } from './datasource';
import { RuleModel } from '@syncfusion/ej2-angular-querybuilder';

@Component({
imports: [
        
        QueryBuilderModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<!-- To render Query Builder. -->
               <ejs-querybuilder #querybuilder width="30%" [dataSource]="data" [rule]="importRules" summaryView="true">
                <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>`
})

export class AppComponent implements OnInit {

    public data?: Object[];
    public importRules?: RuleModel;
    public values: string[] = ['Mr.', 'Mrs.'];
    ngOnInit(): void {
    this.data = employeeData;
    this.importRules = {
        'condition': 'and',
        'rules': [{
        'label': 'EmployeeID',
        'field': 'EmployeeID',
        'type': 'number',
        'operator': 'notequal',
        'value': '5'
    },
    {
        'condition': 'or',
            'rules': [{
            'label': 'Title Of Courtesy',
                'field': 'TitleOfCourtesy',
                'type': 'string',
                'operator': 'equal',
                'value': 'Mr.'
        },
        {
            'label': 'Country',
            'field': 'Country',
            'type': 'string',
            'operator': 'equal',
            'value': 'USA'
        },
        {
        'condition': 'and',
                'rules': [{
                'label': 'City',
                'field': 'City',
                'type': 'string',
                'operator': 'equal',
                'value': 'London'
            }]
        }]
    }]
};
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));