Load tab with data source in EJ2 TypeScript Tab control

4 Jan 20253 minutes to read

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

In the example below, we’ll demonstrate how to fetch data from an OData service using DataManager. The retrieved data is formatted as a JSON object with header and content fields, which are then set to the items property of the Tab control.

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

let itemsData: any = [];
let mapping =  { header: 'FirstName', content: 'Notes' };
const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

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

    for(let i: number = 0; i < result.length; i++) {
      itemsData.push({ header: {text: result[i][mapping.header]}, content: result[i][mapping.content] });
    }

    let tabObj: Tab = new Tab({
      items: itemsData
    });
    tabObj.appendTo('#element');
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Tab" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-content .e-item {
            font-size: 12px;
            margin: 10px;
            text-align: justify;
        }
    
        .container {
            min-width: 350px;
            max-width: 500px;
            margin: 0 auto;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>