Initialization of button's text doesn't work

Ionic Framework ionic-v3
1

I tried ngOnIt and IonViedDidEnter to show text of the button in the beginning (atm there is only a small button without any text) But Both didn’t work and change anything. Do I have to add something so it works?

<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>


 public text: string = '+ADD';



 IonViewDidEnter(){
    this.text = "+ADD";
  }

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

Your button text does not display any value at all… if you want to interpolate the text value (this.text). Simply do this

4

When I do this I don’t have the problem with the small button. But then it changes all the button at the same time (text changes). So not only the button that is pressed changes the text but also the other buttons. Thats why I needed this{{ friend.text}} so only one changes. I have a loop there for a list of items.

5

now that i looked at your code… for you to change friend.text … your friend object needs to have the text property for this to work

//your friend object needs to have this

var friend = {
img:"",
status:"",
name:"",
//include this one
text:""
}
1 Like