Styjun

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 ">
 <img *ngIf="getImage.sex == 'female'" src="http://localhost:8000/files/getImage.image ">
 </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 " (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 

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

This is an general example of how you can fix your shared button problem.

1. 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.


2. 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;