angular - By default the 1st accordion should be set to open without clicking on it in Angular2? -


hey guys need in solving problem. have made use of *ngfor loop accordion , in need first accordion open default. can please me this. here angular2 code.

<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> 

try this.

add index loop

<md-card *ngfor="let value of timer_entries.entries; let = index" style="padding:0px !important;margin-bottom: 10px;margin-top: 15px;"> 

now can add class open 0th index's accordion like

[ngclass]="{'open':(i==0)}" 

Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -