How can I change the button‘s text on a click event?

Question

I want to change the text of a button when it‘s cklicked and change it back when it‘s clicked again. How can I do that?

I tried something like that. But I dont know who I can adress to the text because there is no property like eg with color for ion-buttons

Html

<button (click)="changeText()" ion-button>Hello</button>

TS

  public text: string = 'hello';

constructor

 public changeText(): void {
      if(this.text === 'hello') { 
        this.text = 'rank'
      } else {
        this.text = 'hello'
      }
    }

Possible duplicate of [Changing button text onclick](https://stackoverflow.com/questions/10671174/changing-button-text-onclick) — Simply Ged, Apr 05 '18 at 16:15
Please try to do some research before posting the question. Post your code where you are getting the problem — planet_hunter, Apr 05 '18 at 16:17
Ok sorry for the bad question I posted my existing code above. — CMC, Apr 05 '18 at 16:49

score 4 · Accepted Answer · answered Apr 05 '18 at 19:35

4

You can use interpolation, then your button would look like this:

<button (click)="changeText()" ion-button>{{text}}</button>

answered Apr 05 '18 at 19:35

fawee

1 Answers1