[IONIC 4] Problem with values in html, how get values?

This is my code in HTML

<ion-col style="background:#ffffff" size="6" *ngFor="let item of data; index as i">
                <ion-col size="6">
                  <img src="" />
                          <ion-col size="6">
                          <ion-col size="6" class="ion-text-end">
                                <ion-icon [name]="hello" (click)="change(item.id)" [color]="color" id="{{item.id}}"></ion-icon>


hello = "ios-heart";
color = "";

  if (this.hello === "ios-heart" && this.color === ""){
    this.hello = "ios-heart";
    this.color = "danger";
    this.hello = "ios-heart";
    this.color = "";

How can I get the value of the id of ion-icon (id="{{item.id}}") if the value is dynamic? I am trying to make a heart like me but the moment I press they all light up then I have to differentiate which heart is the one that I have to light up can you help me?

If you are going to attempt to modify a property of something that is different for each item, it must be a property of each item. When it is a property of the controller itself, it will naturally be shared by everything in the page.

re structure your data first

change it to this

data = [
  {id: '1', state: false},
  {id: '2', state: false},
  {id: '3', state: false},

then in your HTML update ion-icon to this

<ion-icon [name]="hello" (click)="change(i)" [color]="item.state ? 'danger' : '' " id="{{item.id}}"></ion-icon>

then update your change function to this

change(index: number){
     this.data[index].state = !this.data[index].state;
1 Like

:clap: Excellent answer could solve my problem, thank you partner I owe you a beer!

1 Like

Iā€™m so happy to hear that.
And I love beer , ha ha ha

1 Like