Hi Andrew,
Thanks for the update.
You can use the header and content property as HTML in the AccordionItemModel like below steps and the same made in the below sample.
Step 1: Add the header and content as HTML string in the AccordionItemModel like below code.
public accordionItems = [
{ header: "<div>Accordion Header</div><div class='e-sub'>Sub Heading</div>", content: "Hello" },
{ header: "<div>Accordion Header</div>", content: "<div>Accordion Content</div></br><div>This is html accordion content.</div>" }
];
Step 2: Use ngFor loop to render the each item of the AccordionItemModel with the each items custom header and content with the help of innerHTML property like below code.
<ejs-accordion #acrdnInstance>
<e-accordionitems>
<e-accordionitem *ngFor="let item of accordionItems" cssClass="e-custom">
<ng-template #header let-data>
<div [innerHTML]="item.header" ></div>
</ng-template>
<ng-template #content>
<div [innerHTML]="item.content" ></div>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
Step 3: Add the accordion items dynamically with the help of below code.
public click(e) {
let items = { header: "<div>Dynamic Header</div>", content: "<div>Dynamic Content</div></br><div>This is html accordion content.</div>" };
this.accordionItems.push(items);
this.acrdnInstance.items = this.accordionItems;
this.acrdnInstance.dataBind();
}
Kindly try the above sample and get back to us If you would require further assistance.
Regards,
Ravikumar Venkatesan