Dynamic Accordion header and content templates

[Unknown]

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]

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

[Andrew Tarr]

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]

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  

[Andrew Tarr]

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]

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

  } 

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 

[Andrew Tarr]

That is helpful. Thank you Ravikumar!

[Vengatesh Maniraj]

Hi Andrew, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Regards, 

Vengatesh  

[Aparna Cilusani]

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

[Ravikumar Venkatesan]

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