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:
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'
}
}
make use of array and check documentation on underscore js to shuffle