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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic Accordion header and content templates

Thread ID:

Created:

Updated:

Platform:

Replies:

143081 Mar 4,2019 12:36 PM UTC Apr 15,2020 02:30 AM UTC Angular - EJ 2 7
loading
Tags: Accordion
Unknown
Asked On March 4, 2019 12:36 PM UTC

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



Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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


Andrew Tarr
Replied On 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

Vengatesh Maniraj [Syncfusion]
Replied On 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  


Andrew Tarr
Replied On 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?

Ravikumar Venkatesan [Syncfusion]
Replied On 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 


Andrew Tarr
Replied On April 14, 2020 02:08 PM UTC

That is helpful. Thank you Ravikumar!

Vengatesh Maniraj [Syncfusion]
Replied On 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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon