Hello everyone, I am seeking assistance with solving a problem I am having. I am using an *ngFor loop for an accordion and I would like the first accordion to be open by default. Can anyone provide guidance on how to accomplish this? Below is my Angular2 code snippet.
<div class="today col-lg-9 col-md-12 col-sm-12 col-xs-12">
<md-card *ngFor="let value of timer_entries.entries" style="padding:0px !important;margin-bottom: 10px;margin-top: 15px;">
<div class="accordion-section">
<accordion>
<accordion-group #group>
<div accordion-heading>
{{value[0]}}
<i class="pull-right glyphicon glyphicon-triangle-right" [ngClass]="{'closeArrow': group?.isOpen, 'openArrow': !group?.isOpen}"></i>
<span class="pull-right padding-right-20 color-primary">{{value[2]}}</span>
</div>
<table border="0" cellpadding="0" cellspacing="0" st-table="rowCollection" class="table table-hover" layout-align="center">
<tbody class="table_body" layout-align="center">
<tr class="table-content wd_table_row" *ngFor="let d of value[1]">
<td class="date-cell">{{d.times[0].date | date:'dd/MM/yyyy'}}</td>
<td class="location-cell">{{d.department}}
</td>
<td class="category-cell">{{d.category}}</td>
<td class="subcategory-cell">{{d.subcategory}}</td>
<td class="client-cell">{{d.client}}</td>
<td class="project-cell">{{d.project}}</td>
<td class="duration-cell">{{d.total_hours}}</td>
<td class="icon-cell-one" style="cursor:pointer;">
<img class="wd-reload-icon" style="width:16px;" src="/images/icons/refreshIcon.svg" alt="reload">
</td>
<td class="icon-cell-one" style="cursor:pointer;" (click)="editModal.show()">
<img style="width:16px;" src="/images/icons/pencil-new.svg" alt="edit">
</td>
<td class="icon-cell-two" style="cursor:pointer;" (click)="deleteModal.show()">
<img style="width:16px;" src="/images/icons/delete-new.svg" alt="delete">
</td>
</tr>
</tbody>
</table>
</accordion-group>
</accordion>
</div>
</md-card>