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
Post a Comment