Ionic 2 change icon on click + translation text

Ionic Framework ionic-v3
1

Hi,
I found probably stupid problem but how can I change icon in ionic 2 after click.
This is a like button with translations.
I would like to achieve different icon and text based on click state.

This is my html:

<button ion-button icon-left small round block
            color="primary" (click)="onLike()">
            <ion-icon name="heart"></ion-icon>
            {{ "LIKE" | translate }}
          </button>

and this is my controller for that:

  onLike () {

    if (User.getCurrentUser()) {
      Place.like(this.place);
      this.showToast('Liked');
    } else {
      this.openLoginModal();
    }
  }

I need to change icon based like default one: name="heart"
liked: name=“heart-outline”

Plus how is best way to manage translation in that case with text: Like, Liked

Can someone explain me that or give some advice?

Thank you

2

You somehow need to be able to know in the controller whether or not the place is liked. Simplest way to do that is via a property in the place:

onLike() {
  // do other stuff
  this.place.liked = true;
}

Then, bind the icon’s name property. Can be done in several ways, here’s one:

<ion-icon [name]="place.liked ? 'heart-outline' : 'heart'">
1 Like
3

Thanks rapropos.

I have a problem how to check “liked” if it’s true.
Maybe there is another way to check it.
Like example toggle or active?

I know this is a newbie question but will be happy if could you help or someone else.

Also I tried something like this:
but it seems like something is wrong - doesn’t work :confused:

http://play.ionic.io/app/00547f722fa1