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

Hello,

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

I have accordion:

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

My templates:

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

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

Thanks,
Br Volodymyr



11 Replies

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


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.    

Regards,
 
Karthigeyan



AT Andrew Tarr April 12, 2020 05:37 PM UTC

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 06:25 AM UTC

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. 

Regards, 
Vengatesh  



AT Andrew Tarr April 13, 2020 12:20 PM UTC

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 01:31 PM UTC

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 



AT Andrew Tarr April 14, 2020 02:08 PM UTC

That is helpful. Thank you Ravikumar!


VM Vengatesh Maniraj Syncfusion Team April 15, 2020 02:30 AM UTC

Hi Andrew, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Regards, 
Vengatesh  



AC Aparna Cilusani March 13, 2023 09:49 AM UTC

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



RV Ravikumar Venkatesan Syncfusion Team March 15, 2023 05:31 PM UTC

Hi Aparna,


Sample: https://stackblitz.com/edit/ej2-angular-accordion-add-dynamic-items-ngfor?file=src%2Fapp.component.ts


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



BM Bridget Murphy December 20, 2023 11:14 AM UTC

Thank you for sharing.



SK Satheesh Kumar Balasubramanian Syncfusion Team December 21, 2023 05:51 AM UTC

You're welcome! Don't hesitate to reach out if you have any more questions or need further assistance


Loader.
Live Chat Icon For mobile
Up arrow icon