Click event on each button on ion-slides

Question

I am having various slide and each having like and comment button, what I have to do that when I click on particular slide like button then that button image changes or it shows like you and 20 likes.

The problem I am facing that when I am click on like button then it will also effect on other slides like button also. When I am refreshing the page it still shows like button is enabled for the particular slide even I already liked it.

My code is below

.html

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="ionicNamedColor == false">
            <button (click)="toggleNamedColor(robot.Id,i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="ionicNamedColor == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

.ts file

public ionicNamedColor: boolean = false;
  public likeArray: any[] = [];


    public toggleNamedColor(articleID: string, indexID: string): void {
        if (this.ionicNamedColor == false) {
          this.ionicNamedColor = true;
        }
        else {
          this.ionicNamedColor = false;
        }
}

SlideChanged() {
    let currentSlide = this.slider.getActiveIndex();
    let slideElements = this.slides.toArray();

    let targetSlide = slideElements[currentSlide];
    console.log(targetSlide);
  }

Answer 1

You can achieve you to add a new key to your _robots JSON object from .ts, Here are the hints:

in your .html File

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="robot.isLiked == false">
            <button (click)="toggleNamedColor(robot.Id, i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="robot.isLiked == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

in your .ts file

let _robots = [
  {
    Id : "1",
    Title: "your title...",
    SortStory: "SortStory...",
    ...
  },{
    Id : "2",
    Title: "your title...",
    SortStory: "SortStory...",
  }
]

function addKeyValue(obj, key, data){
  obj[key] = data;
}


_robots.map(function(person) {
  return addKeyValue(person, 'isLiked', 'false');
});


public toggleNamedColor(indexID): void {
    _robots[indexID].isLiked = true;
}

Hope it helpful for you.