I'm trying to display details of each card on click of Details
link as a collapsible menu.I'm using bootstrap's data-toggle class identified by id's.
I'm not able to make target id's in data-target
dynamic. I tried by giving data-target="openPanel[item]"
/ `data-target="openPanel[i1]"' to get dynamic values but its not working.
Please find the plunker link here
Use *ngIf
for your details panel:
<div class="collapse" id="openPanel" *ngIf="isActive[i1]"> This is {{item.year}} panel </div>
Plunker link here: PLUNKER DEMO
<div data-toggle="collapse" [attr.data-target]="'#openPanel_'+i1" class="row display-inline-mode">
<h4 [ngClass]="{'flipped': isActive[i1] }" (click)="isActive=[];isActive[i1] = !isActive[i1];">Details
</h4>
</div>
<div class="collapse" id="openPanel_{{i1}}">
This is {{item.year}} panel
</div>
attribute binding is the solution. Bootstrap data-toggle should get unique ids so give the index i1 in you case to make ids unique ref: Angular 2 data attributes
Change Your template to this:
<div class="border-box" id="panels">
<div class="quarter-panel panel" *ngFor="let item of quarterDataList;let i1 = index">
<h2>{{item.year}}</h2>
<div class="item-hover" *ngFor="let count of item.quarterData;let i = index" (click)="setClickedRow((i+'_'+item.year))" [class.active]="((i+'_'+item.year)) == selectedRow">
<br>
{{count.view}}-{{count.count}}
</div>
<div data-parent="#panels" data-toggle="collapse" [attr.data-target]="'#openPanel'+ i1" class="row display-inline-mode">
<h4 [ngClass]="{'flipped': isActive[i1] }" (click)="isActive=[];isActive[i1] = !isActive[i1];">Details
</h4>
</div>
<div class="collapse" id="openPanel{{i1}}">
This is {{item.year}} panel
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.