Search code examples
angularngfor

Collapsing only one item of an array of items deployed through a Ng-For in Angular using data-toggle and data-target

how could i specifically collapse a item of my selected card of an array of cards in angular. In this app im doing there is a point where in i bring all the data gathered by cards with its respective information,and in the cards design i include a collapsable feature .The point is that i expose all that data using an ngfor , looping over the database replying the information requested. But when i request the collpase for one card the other ones also collapse .

component that bring all the cards 
        <mat-card>

       <div class="col-sm-12 col-md-4" *ngFor="let post of allPortafolio;let i=index">//FOR LOOP BRINGING ALL CARDS
         .......some code 

         <div class="container">
          <div class="row">

            <h4 *ngIf="post.allComments">
              <small><strong>Comments</strong>({{post.allComments.length>0?post.allComments.length:"No comments"}})</small>
            </h4>

            <i class="fa fa-angle-double-down fa-2x" *ngIf="up" (click)="up=!up"  aria-hidden="true" role="button" data-toggle="collapse"
              data-target="#commentOverflow1"> </i>
            <i class="fa fa-angle-double-up fa-2x"*ngIf="!up" (click)="up=!up" aria-hidden="true" role="button" data-toggle="collapse"
            data-target="#commentOverflow1" > </i>//THESE TWO ICONS COLLAPSE UP AND DOWN THE NEXT CONTAINER

            <div class="container"  >
              <div *ngFor="let comment of post.allComments; let ind = index" id="commentOverflow1" class="collapse">
                <small><strong>Published by: {{comment.name}}</strong></small>
                <h6>{{comment.comments}}</h6>
              </div>
            </div>//THIS CONTAINER HAS ALL THE CARDS AFTER NGFOR FUCNTION

          </div>
        </div>
      </mat-card>
</div>

But as i explained having in main the data-toggle aims a specific id and eventually this ngfor brings all data gathered in cards with same id , any time i click the collapser icons , all cards collapse down or up, instead of only that one i oreder collpase to

enter image description here

Solution

  • @EnriqueGF, when you say component that bring all the cards do you mean that you has some like

    <div *ngFor="let post of AllPost;let i=index">
   <app-card [post]="post">...</app-card>
</div>

    ?

    If the response is true, must be work: up is a variable of the component and it's uniq for each component

    But if you has no component, else

    <div *ngFor="let post of AllPost;let i=index">
   <mat-card>
     ...
   </mat-card>
</div>

    you need convert your variable up in an array. that's declare an array of variables up

    up:boolean[]=[]

    And replace yours up by up[i]

      <i class="fa fa-angle-double-down fa-2x" *ngIf="up[i]" (click)="up[i]=!up[i]"..> 
  <i class="fa fa-angle-double-up fa-2x" *ngIf="!up[i]" (click)="up[i]=!up[i]"..> 
  <div  *ngIf="up[i]" class="container"  >
     ...
  </div>

    You has differents cards, you need diferents variables (or an array)