ngFor click

I’m sure the answer is incredibly simple.

A boiled down example of my issue is having the following action applying to all "item"s in items, not just the one clicked.

<ion-card *ngFor="#item in items"> <img src="https://placehold.it/500x300" [hidden]="!isHidden" /> <button (click)="hide()">Hide img</button> </ion-card>

In my constructor:

this.isHidden = false;

hide() { this.isHidden = !this.isHidden; }

When I click the button, all images are hiding from all "item"s.

Any help is appreciated.

All of the items are referencing the same ‘isHidden’ value, so when you change it for one it changes for all. I’d so something like this:

<ion-card *ngFor="#item of items">
<img src="https://placehold.it/500x300" [hidden]="item.hidden" />
<button (click)="item.hidden = !item.hidden">Hide img</button>
</ion-card>

I haven’t tested that at all but it should be pretty close to the mark.

Worked like a charm thank you.

Thanks for you wealth of shared info on your site too! :grin: