Setting the first accordion in open state by default

[Aditya Murthy]

HI All,

i have a requirement in angular where ill be getting array of data from server and i need to show them as accordions.

So my query is how to set the first accordion open by default upon binding the data to the html.

PS: this has to happen everytime i refresh the data and new data is binded back to the DOM. And accordion items are in a for loop 

Thanks,

Aditya

[Balasubramanian Sattanathan]

Hi Aditya, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and let you know that we can expand the first accordion item by using the expanded property of the accordion items like the below code snippet. 

default.component.ts: 

public accordionItems = [ 

  { 

    header: "<div>Accordion Header</div>", 

    content: "Hello", expanded: true 

  }, 

  { 

    header: "<div>Accordion Header</div>", 

    content: 

      "<div>Accordion Content</div></br><div>This is html accordion content.</div>", expanded: false 

  } 

]; 

default.html: 

<e-accordionitem *ngFor="let item of accordionItems" cssClass="e-custom" [expanded]="item.expanded"> 

  <ng-template #header let-data> 

    <div [innerHTML]="item.header" ></div> 

  </ng-template> 

  <ng-template #content> 

    <div [innerHTML]="item.content"></div> 

  </ng-template> 

</e-accordionitem> 

Sample: https://stackblitz.com/edit/angular-accordion-first-item-expand-using-for-loop?file=default.component.ts 

API: https://ej2.syncfusion.com/angular/documentation/api/accordion/accordionItemModel/#expanded               

Kindly try the above sample and let us know if this is helpful. 

Regards, 

Balasubramanian S