Load accordion with data source in Angular Accordion component

22 Sep 20252 minutes to read

You can bind any data object to Accordion items, by mapping it to header and content  property.

To set up data binding, ensure the @syncfusion/ej2-angular-navigations and @syncfusion/ej2-data packages are installed. Use the DataManager from @syncfusion/ej2-data to query data sources, such as an OData service, and handle the response to populate the Accordion. The resulting data, formatted as a JSON object with header and content fields, which is set to items property of Accordion.

The example below demonstrates an Accordion populated with data from an OData service using DataManager.

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



import { Component, OnInit, ViewChild } from '@angular/core';
import { AccordionComponent } 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';

@Component({
imports: [
         AccordionModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-accordion #element></ejs-accordion>`
})

export class AppComponent implements OnInit {
  @ViewChild('element') accordionObj?: AccordionComponent;
  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: result[i][this.mapping.header], content: result[i][this.mapping.content] });
      }
      (this.accordionObj as AccordionComponent).items = this.itemsData;
      (this.accordionObj as AccordionComponent).refresh();
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));