How to in Angular Data component

24 Jan 20248 minutes to read

Work in offline mode

On remote data binding, every time invoking executeQuery will send request to the server and the query will be processed on server-side.
To avoid post back to server on calling executeQuery, you can set the DataManager to load all the data on initialization time and make the query processing in client-side.
To enable this behavior, you can use offline property of DataManager.

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 {
        const dm: DataManager = new DataManager(
            { url: SERVICE_URI, adaptor: new ODataAdaptor(), offline: true },
            new Query().take(8)
        );

        dm.ready.then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);
    }
}

The loaded data will be cached in the json property of DataManager.

Sending additional parameters to server

You can use the addParams method of Query class, to add custom parameter to the data request.

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().addParams('$top', '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);

Adding custom headers

You can add custom headers to the request made by DataManager using the headers property.

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

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

new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor, headers: [{ 'syncfusion': 'true' }] })
    .executeQuery(new Query())
    .then((e: ReturnOption) => {
        //get result from e.result
    });

Adding custom headers while making cross domain request will initiate preflight request.