I am trying to disable the button after a add button has been clicked. For sake of simplicity I am not adding details just the code that is cause the issue.
<div *ngFor="let n of records">
<span>{{n.name}}</span>
<span>{{n.location}}</span>
<button (click)="addtomainrecord(n)" [disabled]="disablebutton">add</button>
</div>
In my component I have declared
disablebutton:boolean=false;
//later in my code
addtomainrecord(record) {
this.disablebutton=true;
//rest of the code follows
}
The issue I am facing is that once I click add button first time, all the buttons are disabled, while I want to just disable the button of row that I just clicked.
How can it be fixed?
If you have a the "ownership" for records array, you can add an other key-value pair, say 'disabled', otherwise you can create a parallel array disablebutton of the same length as records:
disablebutton = [false,false,...] // better be done in a for loop or with array methods in your code
In the template, you should pass the id of the row which needs the button to be disabled. You get the row index in ngFor:
<div *ngFor="let n of records; let i = index">
<span>{{n.name}}</span>
<span>{{n.location}}</span>
<button (click)="addtomainrecord(i)" [disabled]="disablebutton[i]">add</button>
</div>
And the the method will catch that index to set the button state:
addtomainrecord(index) {
this.disablebutton[index] = true;
}