Dynamic Accordion header and content templates

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

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On March 5, 2019 11:05 AM UTC

Hi Volodymyr,

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.

https://stackblitz.com/edit/angular-nizsse-mjzhpq?file=default.component.ts

UG: https://ej2.syncfusion.com/angular/documentation/accordion/how-to/load-accordion-items-dynamically/?no-cache=1

Regards,

Karthigeyan

Reply | Reply with quote

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

Reply | Reply with quote

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;

Sample: https://stackblitz.com/edit/angular-nizsse-xcehnn?file=default.component.ts

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

Regards,

Vengatesh

Reply | Reply with quote

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?

Reply | Reply with quote

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>

</ng-template>

<ng-template #content>

</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();

}

Sample: https://stackblitz.com/edit/angular-ej2-accordion-adding-accordion-items-dynamically-55kzki?file=default.component.ts

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

API (items): https://ej2.syncfusion.com/angular/documentation/api/accordion/#itemtemplate

API (AccordionItemModel): https://ej2.syncfusion.com/angular/documentation/api/accordion/accordionItemModel/#accordionitemmodel

Regards,

Ravikumar Venkatesan

Reply | Reply with quote

Andrew Tarr

Replied On April 14, 2020 02:08 PM UTC

That is helpful. Thank you Ravikumar!

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US