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