Accordion *ngFor

[Thomas French]

I am attempting to run a repeater on a dynamic sized array, but I am constantly getting strange results.

Often times the header and the data are part of the header AND the body at the same time, instead of the header only being displayed in the header and the body only being displayed in the body.

I am looking for an example of an accordion generating a number of panels equal to the size of my array.

HTML CODE

<!-- <ej-accordion>

<div *ngFor="let orderOptions of lookupValues">

<div>

<h3>TEST HEADER</h3>

<div>

<div>

<label>Date:</label> <span>exampleDate</span>

</div>

<div>

<label>Product:</label> <span>exampleProduct</span>

</div>

</div>

</div>

</div>

</ej-accordion> -->

Thank you

[Keerthana Rajendran]

Hi Thomas,    

   

Thank you for contacting Syncfusion Support.   

   

We have prepared a sample based on your code. Please refer to the given link    

   

Sample: Accordion850016484   

   

We suggest you to use ng-For directly with <ej-accordion> to generate the accordion panels equal to the size of array and to get the header and content panels rendered correctly. Please refer to the given code   

   

<ej-accordion id="accordion1" enableMultipleOpen="true" *ngFor="let orderOptions of lookupValues">   

         <h3> <a rel='nofollow' href="#">TEST HEADER</a></h3>   

          <div>   

             <div>   

                <label>Date:</label> <span>exampleDate</span>   

             </div>   

             <div>   

                <label>Product:</label> <span>exampleProduct</span>   

             </div>                                           

          </div>   

</ej-accordion>   

   

Please follow the below control structure while rendering Accordion   

   

<ej-accordion>   

         <h3> <a rel='nofollow' href="#">Header..</a></h3>   

          <div>   

                Panel Content….// First panel   

          </div>   

         <h3> <a rel='nofollow' href="#">Header..</a></h3>   

          <div>   

                Panel Content….// Second Panel   

          </div>   

   

</ej-accordion>   

   

   

Regards,   

Keerthana.