CODEWITHSUNDEEP
htmlangularionic-frameworkionic2
Devansh sadhotra
Devansh sadhotra

Reputation: 1625

[disabled]="ChooseButton" making all buttons disabled

I have an *ngFor which gives me the certain item list of goods and I click a particular button to choose them. As I click my choose button, it temporarily disables the button till the time I get response from my back-end. As I get my response from back-end, the button becomes active to un-choose the item.

The issue I am facing here is, as I click the choose button, it makes all buttons of the list temporarily disabled. But what I want is to make only the clicked button disabled.

My HTML code snippet:

<ion-card *ngFor="let list of list_Array;>  
 <ion-card-content >
        <p style="color: #666; " [innerHTML]="list.item"></p>
      </ion-card-content>  
    <button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="ChooseButton">
              <div class="chosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
      </button>
     <button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==false"  [disabled]="ChooseButton" >
              <div class="choosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
      </button>
    </ion-card>

Upvotes: 3

Views: 1162

Answers (3)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

Answer 1: As @Pankaj Parkar's answer said - Each item in your list_Array needs to have it's own flag chooseButton, than having 1 common flag for all items to make only the clicked button disabled.

Now, say you have loaded your list_Array. You can use following for loop to add this property to it and set it to false initially:

for(var i = 0; i < list_Array.length; i++){
    list_Array[i]['chooseButton'] = false;
}

Now, pass the list as parameter from your UI code to activeButton(list) method like : (click)="activeButton(list)" (Remember to pass an entire object here than list._id as you have done).

Now, in your method:

activeButton(list) { 
    list.chooseButton = !list.chooseButton;
}

Here, I have negated list.chooseButton to it's previous value (true -> false or false -> true). Hope this helps.

Answer 2: You already have list.isAlreadyChosen present in your list_Array. Just do [disabled]="!list.isAlreadyChosen" in first button and [disabled]="list.isAlreadyChosen" in second should solve your problem. Easy. ;)

Upvotes: 1

mickdev
mickdev

Reputation: 2885

Here is another way to achieve this:

//component
disableMe:boolean[];

disableThis(id){
   this.disableMe[id] = !this.disableMe[id];
}

//template
<button ion-button color="secondary" clear (click)="activeButton(list._id); disableThis(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="disableMe[list._id]">
              <div class="chosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
</button>

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

Currently you have ChooseButton flag global, that's why as soon as you change that flag, it reflects everywhere in component context.

Make the ChooseButton property local to each collection element i.e. list.ChooseButton.

[disabled]="list.ChooseButton"

For applying the above you should change the activeButton function to below, before that pass list object on click of button like (click)="activeButton(list)"

Function

activeButton (item) { 
    item.ChooseButton = true;
    console.log("listId", item._id);
}

Upvotes: 5

Related Questions