How to make a dynamic icon in navbar?

Ionic Framework ionic-v3
1

I have this heart icon in the nav bar, I want to make it inactive by default and when clicked call some function foo which makes it active. What are some good approaches to achieve this?

https://gyazo.com/e077181775ae6bd731080eec93e70f11

Please help, thanks.

2

Just use *ngIf directive. Declare a global variable and use true false state.

@Component({
  selector: 'page-home',
  template: '<ion-icon name="heart" *ngIf="heartIconShow"></ion-icon>'
})
export class HomeComponent {
   heartIconShow: boolean = false;
   foo(){
       this.heartIconShow = true;
   }
}
3

These two things are contradictory. If it’s inactive, clicking it does nothing by definition. I’m going to pretend you want to make it look inactive, in which case I would do this:

unhearted = true;
hearten(): void { this.unhearted = false; }

<button ion-button [class.faded]="unhearted" (click)="hearten()">
  <ion-icon name="heart"></ion-icon>
</button>

.faded {
  opacity: 0.4;
}

That opacity level is what the standard Ionic CSS uses for disabled buttons.