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

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?

CodePudding user response：

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>

CodePudding user response：

You can encapsulate that logic in its own component so each one is a seperate object that can't interfere with each other.

You can than use angular content projection in that new component to keep it easier to work with and not pass everything into it via inputs.

https://angular.io/guide/content-projection

If you create the slides in a ngFor loop you can use the index to identify the objects and act only on a specific one

*ngFor="let item of items; let i=index"