Querying in Angular Data component

30 Apr 202424 minutes to read

In this section, you will see in detail about how to build query using Query class and consume
the data source.

Specifying resource name using from

The from method is used to specify the resource name or table name from where the data should be retrieved.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({


standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().from('Orders').take(8)).then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Projection using select

The select method is used to select particular fields or columns from the data source.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({


standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().select(['OrderID', 'CustomerID', 'EmployeeID']).take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Eager loading navigation properties

You can use the expand method to eagerly load navigation properties. The navigation properties
values are accessed using appropriate field names separated by dot(.) sign.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

@Component({

standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI })
        .executeQuery(new Query().expand('Employee').select(['OrderID', 'CustomerID', 'Employee.FirstName']).take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee Name</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sorting

You can use the sortBy method to perform sort operation in the
data source. Default sorting order is ascending. To change the sort order, either you can
specify the second argument of sortBy as descending or use the
sortByDesc method.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI: string =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({

standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor})
        .executeQuery(new Query().sortBy('CustomerID', 'descending').take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multi sorting can be performed by simply chaining the multiple sortBy methods.

Filtering

You can use the where method to build filter criteria which allows you to get reduced view of
records. The where method can also be chained to form multiple filter criteria.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({



standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().sortBy('CustomerID', 'descending').take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filter Operators

Filter operators are generally used to specify the filter type. The various filter operators
supported by DataManager is listed below.

  • greaterthan
  • greaterthanorequal
  • lessthan
  • lessthanorequal
  • equal
  • notequal
  • startswith
  • endswith
  • contains

These filter operators are used for creating filter query using
where method and Predicate class.

Build complex filter criteria using Predicate

Sometimes chaining where method is not sufficient to create very
complex filter criteria, in such cases we can use Predicate class to create composite filter criteria.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, Predicate, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({


standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        let predicate: Predicate = new Predicate('EmployeeID', 'equal', 3);
        predicate = predicate.or('EmployeeID', 'equal', 2);

        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().where(predicate).take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Searching

You can use the search method to create search criteria, it
differs from the filter in the way that search criteria will applied to all fields in the data
source whereas filter criteria will be applied to a particular field.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
import { data } from './datasource';

@Component({



standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager(data as JSON[])
        .executeQuery(new Query().search('VI', ['CustomerID']))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can search particular fields by passing the field name collection in the second argument of search method.

Grouping

DataManager allow you to group records by category. The
group method is used to add group query.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({

standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[];

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().group('CustomerID').take(8))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table' >
  
    <tr>
        <th>Order ID</th>
        <th>Customer ID</th>
        <th>Employee ID</th>
    </tr>
    <tbody group *ngFor="let item of items" [data]='item' ></tbody>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple grouping can be done by simply chaining the group method.

Paging

You can query paged data using page method. This allow you to query
particular set of records based on the page size and index.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({


standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().page(2, 6))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Aggregation

The aggregate method allows you to get aggregated value for a field based on the type.

The built-in aggregate types are,

  • sum
  • average
  • min
  • max
  • count
  • truecount
  • falsecount
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI =  'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({
standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
        .e-table {
            border: solid 1px #e0e0e0;
            border-collapse: collapse;
            font-family: Roboto;
        }

        .e-table td, .e-table th {
            border-style: solid;
            border-width: 1px 0 0;
            border-color: #e0e0e0;
            display: table-cell;
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            padding: 8px 21px;
            vertical-align: middle;
            white-space: nowrap;
            width: auto;
        }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;
    public min = 0;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().take(5).requiresCount().aggregate('min', 'EmployeeID'))
        .then((e: ReturnOption) => { this.items = e.result as object[];  this.min = (e as any).aggregates['EmployeeID - min']; }).catch((e) => true);
    }
}
<table class='e-table'>
    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
    <tr *ngFor="let item of items">
        <td></td><td></td><td></td>
    </tr>
    <tr><td></td><td></td><td>Min: content<h1 id="qr-code-generator-in-angular-barcode-component">QR Code Generator in Angular Barcode component</h1>

<h2 id="qr-code-overview">QR Code Overview</h2>

<p>A QR Code is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Codes are designed for industrial uses and are also commonly used in consumer advertising.</p>

<div class="tabs" id="code-snippet-1">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#94faypjwjy6vqr62djj7cf8smc7ejboe-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#7w16peqdfeye183hj7cnqvu4vqatynh6-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="94faypjwjy6vqr62djj7cf8smc7ejboe-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span><span class="nx">QRCodeGeneratorAllModule</span><span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@angular/core"</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
          <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span> <span class="nx">QRCodeGeneratorAllModule</span> <span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> 
    <span class="p">],</span>

<span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">],</span>
<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
  <span class="nx">selector</span><span class="o">:</span> <span class="s2">"app-container"</span><span class="p">,</span>
  <span class="c1">// specifies the template string for the barcode generator component</span>
  <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" mode="SVG" value="Syncfusion"&gt;&lt;/ejs-qrcodegenerator&gt;`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="7w16peqdfeye183hj7cnqvu4vqatynh6-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-4svzgipmpw1v4goiwcv0ufukunfy8jf8" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/qrcode-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-4svzgipmpw1v4goiwcv0ufukunfy8jf8" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/qrcode-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-4svzgipmpw1v4goiwcv0ufukunfy8jf8"></div>

<h2 id="customizing-qr-code-colors">Customizing QR Code Colors</h2>

<p>A page or printed media with QR codes often appears colorful in the background and surrounding region with other contents. In such cases, the QR code can be customized to suit the design requirements. The foreground color of the QR code can be changed using the <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/barcodeGeneratorModel/#forecolor"><code>foreColor</code></a> property.</p>

<div class="tabs" id="code-snippet-2">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#lth1kwbxvkopilnpzjznh704o3dx6lzy-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#vsu93thx4ncw9li621wk8oxvvkznzhp9-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="lth1kwbxvkopilnpzjznh704o3dx6lzy-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span><span class="nx">QRCodeGeneratorAllModule</span><span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@angular/core"</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
          <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span> <span class="nx">QRCodeGeneratorAllModule</span> <span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> 
    <span class="p">],</span>

<span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">],</span>
<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
  <span class="nx">selector</span><span class="o">:</span> <span class="s2">"app-container"</span><span class="p">,</span>
  <span class="c1">// specifies the template string for the barcode generator component</span>
  <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" foreColor="red" height="150px" mode="SVG" value="Syncfusion"&gt;&lt;/ejs-qrcodegenerator&gt;`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="vsu93thx4ncw9li621wk8oxvvkznzhp9-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-06j4odqd1momlrw6h23zhoohu8z1ltp0" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/color-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-06j4odqd1momlrw6h23zhoohu8z1ltp0" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/color-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-06j4odqd1momlrw6h23zhoohu8z1ltp0"></div>

<h2 id="customizing-qr-code-dimensions">Customizing QR Code Dimensions</h2>

<p>The dimensions of the QR code can be changed using the <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogoModel/#height"><code>height</code></a> and <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogoModel/#width"><code>width</code></a> properties of the QR code generator. These properties allow precise control over the QR code size to fit various design layouts and printing requirements.</p>

<div class="tabs" id="code-snippet-3">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#804sqp0uuyyg5xgp4ysgac40vz4slxbv-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#virnr8hwbujolsw8181ijxls5erb757p-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="804sqp0uuyyg5xgp4ysgac40vz4slxbv-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span><span class="nx">QRCodeGeneratorAllModule</span><span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@angular/core"</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
          <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span> <span class="nx">QRCodeGeneratorAllModule</span> <span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> 
    <span class="p">],</span>

<span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">],</span>
<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
  <span class="nx">selector</span><span class="o">:</span> <span class="s2">"app-container"</span><span class="p">,</span>
  <span class="c1">// specifies the template string for the barcode generator component</span>
  <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="300px" height="300px" mode="SVG" value="Syncfusion"&gt;&lt;/ejs-qrcodegenerator&gt;`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="virnr8hwbujolsw8181ijxls5erb757p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-m2jqw8nio8iarwsaup1r3a8pc7ytowuz" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/dimension-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-m2jqw8nio8iarwsaup1r3a8pc7ytowuz" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/dimension-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-m2jqw8nio8iarwsaup1r3a8pc7ytowuz"></div>

<h2 id="customizing-display-text">Customizing Display Text</h2>

<p>In QR code generators, the display text shown below the QR code can be customized using the  <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/displayText/#displaytext"><code>displayText</code></a> property. This allows for user-friendly labels or alternative text representations of the encoded data.</p>

<div class="tabs" id="code-snippet-4">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#6ccz62cco1zjhqvlayl4ghz4ote2vi61-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#hxgl977z3wkzwbw8ssd2ms5wlgeo4usn-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="6ccz62cco1zjhqvlayl4ghz4ote2vi61-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span><span class="nx">QRCodeGeneratorAllModule</span><span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">,</span><span class="nx">ViewChild</span><span class="p">}</span> <span class="kr">from</span> <span class="s2">"@angular/core"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorComponent</span><span class="p">,</span><span class="nx">DisplayTextModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
          <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span> <span class="nx">QRCodeGeneratorAllModule</span> <span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> 
    <span class="p">],</span>

<span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">],</span>
<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
  <span class="nx">selector</span><span class="o">:</span> <span class="s2">"app-container"</span><span class="p">,</span>
  <span class="c1">// specifies the template string for the barcode generator component</span>
  <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" [displayText] = 'displayText' mode="SVG" value="Syncfusion"&gt;&lt;/ejs-qrcodegenerator&gt;`</span>
<span class="p">})</span>
  <span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="c1">// @ViewChild('barcode')</span>
    <span class="kd">@ViewChild</span><span class="p">(</span><span class="s1">'displayText'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">displayText?</span>: <span class="kt">DisplayTextModel</span><span class="p">;</span>
    <span class="nx">ngOnInit</span><span class="p">()</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>  

      <span class="k">this</span><span class="p">.</span><span class="nx">displayText</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">text</span><span class="o">:</span><span class="s1">'text'</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="hxgl977z3wkzwbw8ssd2ms5wlgeo4usn-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-7fwfqly9ujt1iaqaqylufavk7r7pqzoa" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/text-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-7fwfqly9ujt1iaqaqylufavk7r7pqzoa" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/text-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-7fwfqly9ujt1iaqaqylufavk7r7pqzoa"></div>

<h2 id="enhancing-qr-codes-with-logos">Enhancing QR Codes with Logos</h2>

<p>The Angular Barcode Generator enables adding a <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#qrcodelogo/"><code>logo</code></a> or icon to QR codes, enhancing their visual appeal, brand recognition, and authenticity. Adding a recognizable logo can make it easier for users to identify the source and can help establish trust and brand presence.</p>

<h3 id="supported-image-sources">Supported Image Sources</h3>

<p>The <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#imagesource"><code>imageSource</code></a> property of the <code>QRCodeLogo</code> class supports the following image sources:</p>

<ul>
  <li>
<strong>Local image path</strong>: Specify the path to the image file relative to the project’s root directory (e.g., <code>images/syncfusion.png</code>) or as an absolute path (e.g., <code>/assets/icons/logo.svg</code>).</li>
  <li>
<strong>Remote image URL</strong>: Provide the web address of the image file (e.g., <code>https://example.com/image.jpg</code>).</li>
  <li>
<strong>Base64 encoded image data</strong>: Embed the image data directly in the code using a Base64-encoded string (e.g., <code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...</code>).</li>
</ul>

<h3 id="logo-dimensions-and-guidelines">Logo Dimensions and Guidelines</h3>

<p>The <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#width"><code>width</code></a> and <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#height"><code>height</code></a> properties of the <code>QRCodeLogo</code> class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability and successful scanning.</p>

<p><strong>Important:</strong> Always test the readability of QR codes after adding a logo. Depending on the logo size and QR code content complexity, it may be necessary to adjust the <a href="https://ej2.syncfusion.com/angular/documentation/api/barcode/errorCorrectionLevel/"><code>errorCorrectionLevel</code></a> property of the <code>QRCodeGenerator</code> to <code>"Medium"</code> or <code>"High"</code> for better reliability and error recovery.</p>

<p>The following image illustrates a QR code with logo:</p>

<p><img src="images/logo.png" alt="QR code with logo"></p>

<div class="tabs" id="code-snippet-5">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#tffb52nzy0oyfubidoku4zxmpby79928-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#tn03spdh2qb7hpsmvm7i433e0oo8bhbl-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="tffb52nzy0oyfubidoku4zxmpby79928-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span><span class="nx">QRCodeGeneratorAllModule</span><span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">,</span><span class="nx">ViewChild</span><span class="p">}</span> <span class="kr">from</span> <span class="s2">"@angular/core"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BarcodeGeneratorComponent</span>  <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-barcode-generator'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
          <span class="nx">BarcodeGeneratorAllModule</span><span class="p">,</span> <span class="nx">QRCodeGeneratorAllModule</span> <span class="p">,</span><span class="nx">DataMatrixGeneratorAllModule</span> 
    <span class="p">],</span>

<span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">],</span>
<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
  <span class="nx">selector</span><span class="o">:</span> <span class="s2">"app-container"</span><span class="p">,</span>
  <span class="c1">// specifies the template string for the barcode generator component</span>
  <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" [logo] = 'logo' mode="SVG" value="Syncfusion"&gt;&lt;/ejs-qrcodegenerator&gt;`</span>
<span class="p">})</span>
  <span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="c1">// @ViewChild('barcode')</span>
    <span class="kd">@ViewChild</span><span class="p">(</span><span class="s1">'logo'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">logo?</span>: <span class="kt">any</span><span class="p">;</span>
    <span class="nx">ngOnInit</span><span class="p">()</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>  
      <span class="k">this</span><span class="p">.</span><span class="nx">logo</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">imageSource</span><span class="o">:</span><span class="s1">'https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png'</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="tn03spdh2qb7hpsmvm7i433e0oo8bhbl-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-gr0dqw5b4yrkbdj6yvetymh4i3hpp3fw" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/logo-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-gr0dqw5b4yrkbdj6yvetymh4i3hpp3fw" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/barcode/qrcode/logo-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-gr0dqw5b4yrkbdj6yvetymh4i3hpp3fw"></div>
</td></tr>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hierarchical query

You can use the hierarchy method to build nested query.
The hierarchical queries are commonly required when you use foreign key binding.

The foreignKey method is used to specify the key field of the
foreign table and the second argument of the hierarchy method
accepts a selector function which selects the records from the foreign table.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI = 'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/';

@Component({


standalone: true,
    selector: 'app-root',
    templateUrl: './app.template.html',
    styles: [`
            .e-table {
                border: solid 1px #e0e0e0;
                border-collapse: collapse;
                font-family: Roboto;
            }

            .e-table td, .e-table th {
                border-style: solid;
                border-width: 1px 0 0;
                border-color: #e0e0e0;
                display: table-cell;
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                padding: 8px 21px;
                vertical-align: middle;
                white-space: nowrap;
                width: auto;
            }
    `]
})
export class AppComponent implements OnInit {

    public items?: object[] | any;

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor()})
        .executeQuery(new Query().from('Orders').take(3).hierarchy(
                    new Query()
                        .foreignKey('OrderID')
                        .from('Order_Details')
                        .sortBy('Quantity'),
                    () => [10248, 10249, 10250] // Selective loading of child elements
                ))
        .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}
<table class='e-table'>
    <tr>
        <th>Order ID</th>
        <th>Customer ID</th>
        <th>Employee ID</th>
    </tr>
    <tbody *ngFor="let item of items">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">
                <table class='e-table'>
                    <tr>
                        <th>ID</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                    <tbody *ngFor="let order of item.Order_Details">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));