BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
public clicktoadd(e) {
// give the item as item model with header and content property
var items = { header: 'NewHeader', content: 'NewContentAdded' };
this.acrdnInstance.addItem(items); // add the item using addItem
} |
Hi Syncfusion team,
I am using loop to render a set of accordions and that loop data is dynamic. But, when I get new data accordion are empty. How can I achieve
Hi Aparna,
You can render the Accordion items using ngFor with the dynamic data as shown in the below code snippet. In this example, in the button click we are changing the accordionItems(bind to the Accordion item ngFor) variable value dynamically, and the Accordion is rendered with the updated data.
[app.component.html]
<button id="change-btn" (click)="changeData($event)">Change accordion items</button> <br/> <br/> <ejs-accordion> <e-accordionitems> <e-accordionitem *ngFor="let item of accordionItems" [expanded]="item.expanded"> <ng-template #header> <div>{{item.header}}</div> </ng-template> <ng-template #content> <div>{{item.content}}</div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> |
[app.component.ts]
export class AppComponent { public accordionItems = [ { header: "Header one", content: "Content one", expanded: true }, { header: "Header two", content: "Content two", expanded: false } ];
public changeData(args): void { this.accordionItems = [ { header: "Accordion Header one", content: "Accordion Content one", expanded: true }, { header: "Accordion Header two", content: "Accordion Content two", expanded: false }, { header: "Accordion Header three", content: "Accordion Content three", expanded: false } ]; } } |
Regards,
Ravikumar Venkatesan