CODEWITHSUNDEEP
typescriptionic-frameworkionic2
user9483522
user9483522

Reputation: 304

Click event on each button on ion-slides

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);
  }

Upvotes: 1

Views: 2339

Answers (3)

Ravi Talveda
Ravi Talveda

Reputation: 23

Implemented in Ionic 4 Angular 8 project:

HTML:

 <ion-slides pager="true" #slides>
    <ion-slide>
        <div>Slide page 1</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 2</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 3</div>
    </ion-slide>
 </ion-slides>

TypeScript:

 @ViewChild('slides', { static: true }) slides: IonSlides;

ngOnInit() {
    this.slides.ionSlidesDidLoad.subscribe((e) => {
        var swiperElements: HTMLCollection =
            this.elem.nativeElement.querySelectorAll(".swiper-pagination-bullet");
        var self = this;
        Array.from(swiperElements).forEach(function(element) {
            element.addEventListener("click", function() {
                self.goToSliderIndex(this, self);
            });
        });
    })
}

goToSliderIndex(child, self) {
    var parent = child.parentNode;
    var bulletIndex = Array.prototype.indexOf.call(parent.children, child);
    this.slides.slideTo(bulletIndex, 2000);
}

Upvotes: 1

Kamlesh Kumar
Kamlesh Kumar

Reputation: 1680

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.

Upvotes: 2

meuser07
meuser07

Reputation: 406

You are using same variable ionicNamedColor for all the items of array.

You can try like create one more variable inside robot object ionicNamedColor and change the color of particular index object color.

Ex : *ngIf="robot.ionicNamedColor == false"

Upvotes: 1

Related Questions