How to act on a single item on an ion-slide?

Issue

I have a list of cards in ion-slide, and each card has an arrow icon that compresses a div in the card to hide the details, and the arrow is flipped while compressed, and a click on it expands it.

Image of expanded div

Image of compressed div

To do that I have do the arrow flip by scaleY() CSS function, and expand the div

home.page.html & home.page.scss

#flip { transform: scaleY(-1); }

<ion-slides>
         <ion-card>
            <ion-img  src="pathicon" *ngIf="travdetails"(click)="travdetails =!travdetails"></ion-img> (normal arrow)
            <ion-img id='flip' src="pathicon" *ngIf="!travdetails"
                (click)="travdetails = !travdetails"> (flipped arrow)
             <ion-text> Some Text </ion-text> 
             <div *ngIf="travdetails"> (div that expanded and compressed)
             <ion-text> Some Text> </ion-text>
             </div>
       </ion-card>
    </ion-slides>

           

home.page.ts

 travdetails = true;

It works fine but expanded all divs in all cards at once, how to expand only the selected card?

Solution

It is exepanded all the card because your condition is not specific.

If travdetails change, it will affecte all the card.

You should have a specific travdetails like travdetails1, travdetails2 for each card you add.

Or, if you create the component based on a list, maybe add a property like isExpended.

<ion-card *ngFor="let travdetails of travdetailsList">
            <ion-img  src="pathicon" *ngIf="travdetails.isExpanded"(click)="travdetails.isExpanded =!travdetails.isExpanded"></ion-img> (normal arrow)
            <ion-img id='flip' src="pathicon" *ngIf="!travdetails.isExpanded"
                (click)="travdetails.isExpanded= !travdetails.isExpanded"> (flipped arrow)
             <ion-text> Some Text </ion-text> 
             <div *ngIf="travdetails.isExpanded"> (div that expanded and compressed)
             <ion-text> Some Text> </ion-text>
             </div>
       </ion-card>

Answered By - user1075296