Load tab with data source in Angular Tab component

22 Sep 20253 minutes to read

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

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

In the following demonstration, data is retrieved from an OData service using Syncfusion’s DataManager. The retrieved data is structured as JSON objects with header and content fields, which are then bound to the items property of the Tab component. The DataManager handles the HTTP requests and data formatting automatically, simplifying integration with remote data sources.

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