ngFor display individual items inside collapsible menu card

Question

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

you want to expand details of one panel at a time ? – Faisal Aug 09 '17 at 14:34 — Faisal, Aug 09 '17 at 14:34
Yes @Faisal.Like accordion – forgottofly Aug 09 '17 at 14:38 — forgottofly, Aug 09 '17 at 14:38

score 2 · Answer 1 · answered Aug 09 '17 at 14:41

2

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

answered Aug 09 '17 at 14:41

Faisal

31,390
9
89
101

score 1 · Answer 2 · answered Aug 09 '17 at 14:47

<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>&nbsp;&nbsp;&nbsp;
  </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

score 1 · Accepted Answer · answered Aug 09 '17 at 19:08

1

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>&nbsp;&nbsp;&nbsp;
         </div>
         <div class="collapse" id="openPanel{{i1}}">
            This is {{item.year}} panel
           </div>
</div>

Plunkar Link Here

answered Aug 09 '17 at 19:08

Gaurav Srivastava

3,197
3
15
35

If i click on the same 'Details' again how can I remove the highlight?ie., when collapsing back the 'Details' should be in the previous state – forgottofly Aug 10 '17 at 10:12
@forgottofly you don't need flipped class to highlight the css when opened closed there is already a class applied you can use :not(.collapsed) to select opened acordion and apply the css – Gaurav Srivastava Aug 10 '17 at 10:53
please find this plunker with toggle arrows. https://plnkr.co/edit/jYw7vKv9F0xTID482zLn?p=preview .How can I toggle them in same card – forgottofly Aug 10 '17 at 11:17

ngFor display individual items inside collapsible menu card

3 Answers3