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

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

• javascript
• html
• angular
• button
• disable

3 Answers 3

You can add a new property to each item of array and check this property for disable item:

Component.ts

myArray:Array<{firstName:string,lastName}>=[]; // there isn't isDisabled in this model

doSomething(item){
   item.isDisabled=true;
   // do something
}

Component.html:

<div *ngFor="let item of myArray">
   <button (click)="doSomething(item)" [disabled]="item.isDisabled">Register</button>
</div>

I hope this helps you.

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

Demo

I hope it will work

<div *ngFor="let n of records">
   <span>{{n.name}}</span>
   <span>{{n.location}}</span>
   <button (click)="addtomainrecord(n)" [disabled]="n.disablebutton">add</button>
</div>


addtomainrecord(record) {,
     record.disablebutton=true;
   //rest of the code follows
}

For reference: Disable button with ngFor