We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic Accordion header and content templates


Is it possible to set values dynamically to header templates and content templates?

I have accordion:

<ejs-accordion #acrdnInstance (expanding)="expanding($event)">
<e-accordionitem expanded='true' [header]="header" [content]='content' cssClass="e-custom">

My templates:

<ng-template #header>
<p id="text">TextValueToInsert2</p>

<ng-template #content>
<div id="nested_accordion"></div>

Br Volodymyr

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 5, 2019 06:05 AM

Thanks for contacting Syncfusion support.   
Yes, it is possible and kindly add the item as item model using the addItem public method to achieve your requirement. Please find the below code snippet for more reference.  
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  
We have also prepared a sample for your reference below.    


AT Andrew Tarr April 12, 2020 12:37 PM

Greetings, I'm also trying to accomplish this (adding header/content accordion items dynamically). The stackblitz provided as an example by Karthigeyan (https://stackblitz.com/edit/angular-nizsse-mjzhpq?file=default.component.ts) does not work. It just throws errors in the console.

Attachment: Screen_Shot_20200412_at_12.35.49_PM_99a60bb8.zip

VM Vengatesh Maniraj Syncfusion Team April 13, 2020 01:25 AM

Hi Andrew, 

Greetings from Syncfusion Support. 

We have checked the sample and found the cause for the reported issue is that the instance variable in mismatched. So we modified the sample like below code. 

@ViewChild('acrdnInstance') acrdnInstance: AccordionComponent; 

Please check the sample and get back to us if you need any further assistance. 


AT Andrew Tarr April 13, 2020 07:20 AM

Thank you for the quick reply but I am looking for an example of how to add an accordion item which uses a template for its header and content and not just plain text. In the example provided, the "CLICK TO ADD ITEM" button adds header text and content text. How can this be modified to use the #header template html and the #content template html? Does my question make sense?

RV Ravikumar Venkatesan Syncfusion Team April 14, 2020 08:31 AM

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-accordionitem *ngFor="let item of accordionItems" cssClass="e-custom"> 
          <ng-template #header let-data> 
            <div [innerHTML]="item.header" ></div> 
          <ng-template #content> 
            <div [innerHTML]="item.content" ></div> 

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.acrdnInstance.items = this.accordionItems; 

Kindly try the above sample and get back to us If you would require further assistance. 

Ravikumar Venkatesan 

AT Andrew Tarr April 14, 2020 09:08 AM

That is helpful. Thank you Ravikumar!

VM Vengatesh Maniraj Syncfusion Team April 14, 2020 09:30 PM

Hi Andrew, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 


Live Chat Icon For mobile
Up arrow icon