Querying in Angular Data component

27 Sep 202324 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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Projection using select

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

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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

@Component({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GroupComponent } from './group.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent, GroupComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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

app.component.ts

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({
    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);
    }
}

app.template.html

<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="qrcodegenerator-in-angular-barcode-component">Qrcodegenerator in Angular Barcode component</h1>

<h2 id="qr-code">QR Code</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 set the version according to the length of the input text. The QR Barcodes are designed for industrial uses and 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="#irprpxyu5itnc44ovip4tbajol4voled-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="#uu442jg4lzd2vwrq90rm9kkxnk7wazlv-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.module.ts</a></li>
<li role="presentation" class=""><a data-target="#h4os56r5wb6w25v2xa4nqdzsseqfkpki-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="irprpxyu5itnc44ovip4tbajol4voled-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">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">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="uu442jg4lzd2vwrq90rm9kkxnk7wazlv-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="p">;</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="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="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="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Module</span>
<span class="cm"> */</span>
<span class="kd">@NgModule</span><span class="p">({</span>
    <span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">BrowserModule</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">declarations</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">bootstrap</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppModule</span> <span class="p">{</span> <span class="p">}</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="h4os56r5wb6w25v2xa4nqdzsseqfkpki-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">platformBrowserDynamic</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser-dynamic'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">enableProdMode</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.module'</span><span class="p">;</span>

<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">enableProdMode</span><span class="p">();</span>
<span class="nx">platformBrowserDynamic</span><span class="p">().</span><span class="nx">bootstrapModule</span><span class="p">(</span><span class="nx">AppModule</span><span class="p">);</span></code></pre></div>
</div>

</div>

</div>

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

<h2 id="customizing-the-barcode-color">Customizing the Barcode color</h2>

<p>A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases the barcode can also be customized to suit the needs. You can achieve this by using for forecolor property .</p>

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

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

<li role="presentation" class=""><a data-target="#7ax23lkxd81rbmtori5kytfqaj3g9xwf-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="#kn41s37x7bvfxbt6txo7wl9q5m0966er-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.module.ts</a></li>
<li role="presentation" class=""><a data-target="#j1oyar0ls5armmct84hd8x3g9sq32rtm-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="7ax23lkxd81rbmtori5kytfqaj3g9xwf-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">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">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="kn41s37x7bvfxbt6txo7wl9q5m0966er-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="p">;</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="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="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="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Module</span>
<span class="cm"> */</span>
<span class="kd">@NgModule</span><span class="p">({</span>
    <span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">BrowserModule</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">declarations</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">bootstrap</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppModule</span> <span class="p">{</span> <span class="p">}</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="j1oyar0ls5armmct84hd8x3g9sq32rtm-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">platformBrowserDynamic</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser-dynamic'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">enableProdMode</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.module'</span><span class="p">;</span>

<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">enableProdMode</span><span class="p">();</span>
<span class="nx">platformBrowserDynamic</span><span class="p">().</span><span class="nx">bootstrapModule</span><span class="p">(</span><span class="nx">AppModule</span><span class="p">);</span></code></pre></div>
</div>

</div>

</div>

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

<h2 id="customizing-the-barcode-dimension">Customizing the Barcode dimension</h2>

<p>The dimension of the barcode can be changed using the height and width properties of the barcodegenerator.</p>

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

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

<li role="presentation" class=""><a data-target="#qjjq9wg390j26f7jbnyro76j1s0kgnb0-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="#aeiwujyao5v808tqfznsliru61izu6vk-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.module.ts</a></li>
<li role="presentation" class=""><a data-target="#mf9wmoyc7akiuhilyaifk0qihdojukad-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="qjjq9wg390j26f7jbnyro76j1s0kgnb0-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">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">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="aeiwujyao5v808tqfznsliru61izu6vk-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="p">;</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="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="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="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Module</span>
<span class="cm"> */</span>
<span class="kd">@NgModule</span><span class="p">({</span>
    <span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">BrowserModule</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">declarations</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">bootstrap</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppModule</span> <span class="p">{</span> <span class="p">}</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="mf9wmoyc7akiuhilyaifk0qihdojukad-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">platformBrowserDynamic</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser-dynamic'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">enableProdMode</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.module'</span><span class="p">;</span>

<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">enableProdMode</span><span class="p">();</span>
<span class="nx">platformBrowserDynamic</span><span class="p">().</span><span class="nx">bootstrapModule</span><span class="p">(</span><span class="nx">AppModule</span><span class="p">);</span></code></pre></div>
</div>

</div>

</div>

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

<h2 id="customizing-the-text">Customizing the text</h2>

<p>In barcode generators You can customize the barcode text by using display text property .</p>

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

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

<li role="presentation" class=""><a data-target="#ywmug3pu3b1zwp0q99l4h5lbaq7edr75-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="#clkbcv1jkdth1lhlfh5il2wpatv50927-ts" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="ts">app.module.ts</a></li>
<li role="presentation" class=""><a data-target="#v82sehjh3wsa9ys7zuy22qa6vgmfwg73-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="ywmug3pu3b1zwp0q99l4h5lbaq7edr75-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">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">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="clkbcv1jkdth1lhlfh5il2wpatv50927-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="p">;</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="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="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="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Module</span>
<span class="cm"> */</span>
<span class="kd">@NgModule</span><span class="p">({</span>
    <span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">BrowserModule</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">declarations</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">bootstrap</span><span class="o">:</span> <span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
    <span class="nx">providers</span><span class="o">:</span> <span class="p">[</span> <span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppModule</span> <span class="p">{</span> <span class="p">}</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="v82sehjh3wsa9ys7zuy22qa6vgmfwg73-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">platformBrowserDynamic</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser-dynamic'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">enableProdMode</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.module'</span><span class="p">;</span>

<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">enableProdMode</span><span class="p">();</span>
<span class="nx">platformBrowserDynamic</span><span class="p">().</span><span class="nx">bootstrapModule</span><span class="p">(</span><span class="nx">AppModule</span><span class="p">);</span></code></pre></div>
</div>

</div>

</div>

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

app.component.ts

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({
    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);
    }
}

app.template.html

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);