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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Accordion *ngFor

Thread ID:

Created:

Updated:

Platform:

Replies:

131526 Jul 14,2017 02:18 PM UTC Jul 17,2017 07:16 AM UTC Angular 1
loading
Tags: ejAccordion
Thomas French
Asked On July 14, 2017 02:18 PM UTC

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 [Syncfusion]
Replied On July 17, 2017 07:16 AM UTC

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.  
 


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.

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

;