Offline mode with Angular DataManager

15 Apr 20264 minutes to read

In Angular applications, remote data binding with DataManager typically sends a request to the server each time the executeQuery method is invoked. This repeated communication can increase latency and place additional load on the server.

To improve efficiency, DataManager provides an offline property. When enabled, all data is loaded during initialization, and subsequent query processing is handled on the client side. This eliminates unnecessary server calls, resulting in faster response times and reduced server overhead.

To enable offline mode in DataManager, set the offline property to true during initialization. This is demonstrated in the below code example.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
@Component({
    imports: [CommonModule],
    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_URL, adaptor: new ODataV4Adaptor(), offline: true})
        .executeQuery(new Query().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>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
    </tr>
</table>

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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

When to use Offline mode

Offline mode is most effective when:

• The dataset is moderately sized and can be loaded during initialization.
• Data does not change frequently, reducing the risk of stale results.
• Client-side query processing provides a performance advantage.

When to avoid Offline mode

Offline mode should be avoided in scenarios such as:

• Large datasets: Loading all records at once may cause performance issues in the browser.
• Frequently changing data: Cached data may become outdated quickly.
• Real-time requirements: Applications that depend on live or streaming data need server-side queries.
• Sensitive data: Storing all records on the client side may expose information unnecessarily.