Button with toggling text and (click) event

Ionic Framework ionic-v3
1

How to create a simple button that toggle between two versions of it alternately?
At the beginning it should look like this:

<button ion-button block (click)="startPing()">Start work</button>

and then after clicking it should switch to:

<button ion-button block (click)="stopPing()">Stop work</button>

and then again to first version and so on.

2 
<button ion-button block (click)="isWorking ? stopPing() : startPing()">{{isWorking ? "Stop work" : "Start work"}}</button>

And on the functions startPing() and stopPing() you set this.isWorking to either true or false

or if you prefer…

<button *ngIf="isWorking === false" ion-button block (click)="startPing()">Start work</button>
<button *ngIf="isWorking === true" ion-button block (click)="stopPing()">Stop work</button>
1 Like
3

Another related option is to combine the functionality of startPing() and stopPing() into a single togglePing(), which leaves only the button text to be conditional.

2 Likes
4

Thank you so much for this answer.