Ionic 2 change icon on click + translation text

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

and this is my controller for that:

  onLike () {

    if (User.getCurrentUser()) {;
    } else {

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

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 = 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

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: