When click on the button in listview item, only that appropriate button text should change in angular2 nativescript

Question

• I have created listview.For every listview item I'm having one button. When click on that button, I need to change the text.

• For Example : I'm clicking on 0th index listview item button. When click on that button, it needs to change that button text only. But it is changing all the button texts.

• What's happening now : When click on that button in listview item, It is changing the text in all button.

• What I need : When click on that button in listview item, I need to change the text in that particular button only.

html:

<StackLayout class="page">
    <ListView [items]="items" class="list-group">

    <ng-template let-item="item" let-myIndex="index">

   <GridLayout  rows="auto" columns="*, auto" >

        <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" row="0" col="0" class="list-group-item"> </Label>

        <Button  text= "{{textBtn}}" (tap) ="checkInstall($event)" row="0" col="1" [id]="myIndex"> </Button>   ----> Getting button index

   </GridLayout>

   </ng-template>

  </ListView>
</StackLayout>

ts file:

  checkInstall(args: EventData) : void{

    let button = <Button>args.object;

    this.getId = args.object.get("id");

    if(this.getId == 0) {     ---> based on the button index 0, checking app is installed or not.   

     appavailability.available("com.facebook.lite").then((avail: boolean) => {

    console.log("App available? " + avail);

    if(avail == true){

    console.log("button id :"+ args.object.get("id"));

    this.textBtn = "Remove"; 

    console.log("True", "Test");

    } else {

    console.log("False", "Test");

    }

  });

  } else {


     this.textBtn = "Install"; 

  }
 }   

cmd:

When clicking on the 0th position listview button, I'm getting this:

App Available ? true
button id : 0
True Test

Answer 1

1. You already got the index there, you don't need to assign it to id, you could just pass it in the function (tap)="checkInstall($event, myIndex)"

2. textBtn is the default button text for all button, okay, but if you change it, all button text will be changed. To change the button text according the clicked button, since you already got the Button object in the component so just use it:

   let button = <Button>args.object; button.set('text', 'Remove'); // this will change the current button clicked

so your whole code could be:

checkInstall(args: EventData, index: number): void {
    let button = <Button>args.object;
    if (index === 0) {
        appavailability.available("com.facebook.lite").then((avail: boolean) => {
            console.log("App available? " + avail);
            if (avail == true) {
                console.log("button id :" + args.object.get("id"));
                button.set('text', 'Remove');
                console.log("True", "Test");
            } else {
                console.log("False", "Test");
            }
        });
    } else {
        button.set('text', 'Install');
    }
}

and in your view:

<Button text="{{textBtn}}" (tap)="checkInstall($event, myIndex)" row="0" col="1"></Button>