Angular
Demos
Support
Forum
Download
Search results

Load accordion with DataSource in Angular Accordion component

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

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Accordion.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { AccordionComponent } from '@syncfusion/ej2-angular-navigations';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

const SERVICE_URI: string = 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Employees';

@Component({
    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 ODataAdaptor})
    .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.items = this.itemsData;
      this.accordionObj.refresh();
    });
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Previous
Next