Load accordion with data source in Angular Accordion component
27 Apr 20242 minutes to read
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 { 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));