How to change text of button onclick?

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)

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

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:


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


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'

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

1 Like

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