How to load Accordion with DataSource in Angular Accordion

26 Sep 20263 minutes to read

You can bind any data object to Angular 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 Angular Accordion. The resulting data, formatted as a JSON object with header and content fields, which is set to items property of Angular Accordion.

The example below demonstrates an Angular 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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));