Switching one icon button switches all icon buttons in my share post - ionic-framework

Question

I am making ionic project in my project i want to add double tab likes button .My proble is when tap on image then show likes icon for all post .I want to show only likes post icon .How can resolve this please help me below are my code which is used for likes icon..
tab1.page.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title style="border: 1px solid #ccc" (click)="scrollToTop()">Pictagram</ion-title>
</ion-toolbar>
</ion-header>
<ion-content cache-view="false">
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<hr no-margin no-padding>
<div (swipe)="swipePage($event)">
<!-- Cards -->
<ion-card no-padding padding-bottom no-margin class="card" *ngFor="let getImage of getImages3">
<ion-row>
<ion-col col-10>
<ion-item>
<ion-avatar item-left>
<img *ngIf="getImage.sex == 'male'" src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}">
<img *ngIf="getImage.sex == 'female'" src="http://localhost:8000/files/{{getImage.image || 'Female-Avatar.jpg'}}">
</ion-avatar>
<b style="width: 222px;display: -webkit-box;padding-left: 11px;">{{getImage.name}}</b>
</ion-item>
</ion-col>
<ion-col col-2>
</ion-col>
</ion-row>
<div>
<img src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}" (click)="tapPhotoLike(getImage.id)">
</div>
<p no-margin no-padding>
<button clear ion-button icon-only class="like-btn">
<ion-icon no-padding [name]="like_btn.icon_name" color="{{ like_btn.color }}" class="icon-space"></ion-icon>
</button>
</p>
<ion-card-content class="padding">
<p class="like-content">
<ion-icon class="color" name="heart" ></ion-icon> {{getcounts}} likes
</p>
<p><b>{{getImage.title}}</b>{{getImage.info}}</p>
<ion-note style="font-size: 12px">
{{getImage.created_at | timeAgo}}
</ion-note>
</ion-card-content>
</ion-card>
</div>
</ion-content>
In tab1.page.ts file i am manage the icon please help me how to show icon only for liked post. how to set id please help me...
tab1.page.ts
import { Component, OnInit } from '#angular/core';
import { UserService } from '../user.service';
import { User } from '../user';
import { first } from 'rxjs/operators';
import { Storage } from '#ionic/storage';
import { ToastController } from '#ionic/angular';
import { LoadingController } from '#ionic/angular';
#Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
getImages: User[] = [];
getImages2: User[] = [];
getImages3;
getcounts;
countLikes
counts
unlikes
public like_btn = {
color: 'danger',
icon_name: 'heart-empty'
};
public tap: number = 0;
constructor(private userService: UserService,
public toastController: ToastController,
private storage: Storage,
public loadingController: LoadingController) {
}
doRefresh(event) {
this.userPost();
setTimeout(() => {
event.target.complete();
}, 2000);
}
ngOnInit() {
this.userPost();
this.getCountOfLikes();
}
async userPost() {
const loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});
await loading.present();
this.userService.getUserPost().pipe(first()).subscribe(getImages => {
this.getImages3 = getImages;
//console.log(this.getImages3);
loading.dismiss();
});
}
likeButton() {
const detail_id = this.userService.getCurrentIdpostId();
if (this.like_btn.icon_name === 'heart-empty') {
this.like_btn.icon_name = 'heart';
this.like_btn.color = 'danger';
this.storage.get('userId').then((val) => {
if (val) {
this.userService.userPostLikes(val, detail_id).pipe(first()).subscribe(
async data => {
//console.log(data);
if (data['status'] === 'you have already liked this post') {
const toast = await this.toastController.create({
message: 'you have already liked this post',
duration: 2000
});
toast.present();
}
this.getCountOfLikes();
}
);
}
});
}
else {
this.like_btn.icon_name = 'heart-empty';
this.like_btn.color = 'danger';
this.unlikePost();
this.getCountOfLikes();
}
}
tapPhotoLike($detail_id) {
this.userService.setCurrentIdpostId($detail_id);
this.tap++;
setTimeout(() => {
if (this.tap == 1) {
this.tap = 0;
//alert('Single Tap');
} if (this.tap > 1) {
this.tap = 0;
this.likeButton();
//alert('Double Tap');
}
}, 250);
}
ionViewWillEnter() {
this.userPost();
this.getCountOfLikes();
}
getCountOfLikes() {
this.userService.getCountId().pipe(first()).subscribe(likes => {
this.counts = likes;
for (var k in this.counts) {
var i = this.counts[k].detail_id;
}
this.userService.getUserPostlikes(i).pipe(first()).subscribe(getlikes => {
this.getcounts = getlikes;
});
});
}
unlikePost() {
let detail_id = this.userService.getCurrentIdpostId();
this.storage.get('userId').then((val) => {
if (val) {
this.userService.unLikes(val, detail_id).subscribe(async dislikes => {
this.unlikes = dislikes;
})
}
});
}
}

Answer 1

This is an general example of how you can fix your shared button problem.
We are going to make an array which will toggle values. The array will be the size of the data array. Inside we will place all values to false.
If a button is clicked, the index of the data array will be passed and this will change the value of the toggle array to true.
HTML
Looping over the data array with index i
<ion-item *ngFor="let image of images; index as i">
<ion-button (click)="toggleIcon(i)">
<ion-icon name="heart-empty" *ngIf="!iconToggle[i]"></ion-icon>
<ion-icon name="heart" *ngIf="iconToggle[i]"></ion-icon>
</ion-button>
</ion-item>
TS
If we get the data from the subscribe, we set the toggle array to all false values.
If the button is clicked, the value of the same index as the data array changes to true and the other icon can be showed in html.
images = []
iconToggle = [];
this.userService
.getUserPost()
.subscribe(res => {
this.images = res;
this.setIconToggles();
});
setIconToggles() {
let x = 0;
this.images.forEach(() => {
this.iconToggle[x] = false;
x++;
});
}
toggleIcon(num: number) {
if (this.orderToggle[num]) {
this.orderToggle[num] = false;
} else {
this.orderToggle[num] = true;
}
}