Hi Sarvana,
Thanks for using Syncfusion Products.
We have rendered two accordion components using *ngFor loop. We have added *ngFor on <ejs-accordion> tag which is used to render accordion on multiple times with different id’s. We have separated accordion items using *ngIf condition. If it is satisfied if condition, then we have passed specific items into particular accordion component. Please find the below code.
|
app.component.ts
@Component({
selector: 'app-root',
template: `
<h2>{{title}}</h2>
<ejs-accordion *ngfor="let accordion of accordions" id={{accordion}}> // Render accordion with ngFor loop
<e-accordionitems>
<div *ngif="accordion == 1"> // checked accordion id
<e-accordionitem *ngfor="let item1 of firstItems" header={{item1.header}}content={{item1.content}}></e-accordionitem> // For loop for accordion item
</div>
<div *ngif="accordion == 2">
<e-accordionitem *ngfor="let item2 of secondItems" header={{item2.header}}content={{item2.content}}></e-accordionitem>
</div>
</e-accordionitems>
</ejs-accordion>
`
})
export class AppComponent {
title = 'Accordion';
accordions = [1, 2]; // Specify number of accordions
firstItems = [ // Specify accordion items
new Items('ASP.NET', 'Microsoft ASP.NET'),
………
];
secondItems = [
new Items('C#', 'C# language')
…….
];
} |
For your convenience, we have prepared a simple sample with your requirement. Please the stackblitz link on below.
To know more about the Accordion component members. Please refer to the below reference
Regards,
Buvana S
