How to load tab with data source in Angular Tab

31 Aug 20264 minutes to read

You can bind any data object to Tab items by mapping the data to the header and content properties.

Dependencies: install the @syncfusion/ej2-data package to use DataManager and adaptors.

You can watch the following video to learn more about loading tab items from a remote data source in the Angular Tabs component:

Steps

  1. Create a DataManager configured with the remote URL and an ODataAdaptor.
  2. Bind the result to the Tab’s items property after the request resolves.
  3. Optionally map remote field names to header.text and content (see Field mapping).

In the following demonstration, data is retrieved from an OData service using Syncfusion’s DataManager; the response is structured as JSON objects with header and content fields, which are then bound to items.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




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

const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

/**
 * Load tab with DataSource
 */

@Component({
imports: [
         FormsModule, TabModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-tab #tab></ejs-tab>`
})
export class AppComponent implements OnInit {
    @ViewChild('tab') tabObj?: TabComponent;
    public itemsData: any = [];
    public mapping =  { header: 'FirstName', content: 'Notes' };

    public ngOnInit(): void {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor})
        .executeQuery(new Query().range(1, 4)).then((e: ReturnOption) => {
            let result: any = e.result;

            for(let i: number = 0; i < result.length; i++) {
                this.itemsData.push({ header: {text: result[i][this.mapping.header]}, content: result[i][this.mapping.content] });
            }
            (this.tabObj as TabComponent).items = this.itemsData;
            (this.tabObj as TabComponent).dataBind();
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Field mapping

When the remote payload uses different field names (for example, Title and Body), map them to header.text and content in a transform step before assigning to items.

See Also