Angular: Liking posts problems

I'm making an Angular application. And my mobile versions are managed with Capacitor, I'm working on managing a like system and I can't get it to work on mobile. I'd like it to be like a classic social network, so that when the user likes a post, the heart turns red, then back to black if the like is removed. I've already looked at other questions on stack overflow but none of the solutions have solved my problem.

Here's how it works:

My method in my TS file:

public likedPosts: { [key: number]: boolean } = {};

public like(id_actu: number) {
this.newsSrv.getLikeActuUser(id_actu.toString(), this.userContact.toString()).subscribe(data => {

if (data.length === 0) {
const reponseLike = [{
id_actu: id_actu,
is_like: 1,
id_user: this.userContact
}];

this.newsSrv.postLikeActu(JSON.stringify(reponseLike)).then(() => {
this.likedPosts[id_actu] = true;
this.cdr.detectChanges();
})

} else {
const reponseUnlike = [{
id_actu: id_actu,
is_like: 0,
id_user: this.userContact
}];

this.newsSrv.postLikeActu(JSON.stringify(reponseUnlike)).then(() => {
this.likedPosts[id_actu] = false;
this.cdr.detectChanges();
});
}
});
}

public checkIfLike(likes: any[]): string {
const isLiked = likes.some(like => like.id_user == this.userContact);
return isLiked ? 'danger' : 'dark';
}


And here is my like button:

<ion-button #likeButton *ngIf="ac && ac.id" (click)="like(ac.id)">
<ion-icon [color]="checkIfLike(ac.likes_list)" name="heart" class="data_bottom data_icon icon-coeur-plein"></ion-icon>
</ion-button>

Continue reading...