How to change text of button onclick?

Ionic Framework ionic-v3
1

Hey I want that my button changes the text when its clicked, and change back when its clicked again. How can I do that? Additionally I mention that I already have a click event to change the color, with color attribute, but I can’t do it the same way like with the color. (Error)

2

You can modify a property in your controller in the click handler for your button. More details about syntax in the “interpolation” section of the template syntax documentation.

1 Like
4

Hey @rapropos thx for your answer. The text changes now. But I have one problem. When I start the app first, the button is very small and there is no the text on it. When I press it first it works and the text appears and when I click again, it changes back. Do you know how to deal with this problem?

Here is the code:

HTML

   <ion-item *ngFor="let friend of friendsList">
      <ion-avatar item-start>
        <img src={{friend.img}}>
      </ion-avatar>
      <button ion-button color="rank" class="avat"> </button>
      <h2>{{friend.name}}</h2>
      <p>{{friend.status}}</p>
      <button (click)="toggleNamedColor(friend)" (click)="changeText(friend)" ion-button round [color]="friend.ionicNamedColor" item-end >{{friend.text}}</button> 
    
      
    </ion-item>

TS

public text: string = '+ADD';

public toggleNamedColor(friend): void {
      if(friend.ionicNamedColor === 'rank') { 
        friend.ionicNamedColor = 'primary'
      } else {
        friend.ionicNamedColor = 'rank'
      }

    }

    public changeText(friend): void {
      if(friend.text === '✓ADDED') { 
        friend.text = '+ADD'
      } else {
        friend.text = '✓ADDED'
      }
    }
5

58
Bildschirmfoto 2018-04-05 um 22.04.58.png126×788 10.1 KB

this is how the button look before they are pressed for the first time.

6

make use of array and check documentation on underscore js to shuffle