Disable only the clicked button of a row in Primeng table

Question

My primeng table has button in each row, as soon as I click on any button that button should disable. But in my code all the buttons are getting disabled on a single button click. Please guide me how to disable only the clicked button (i dont want button toggle, button ones disabled show be enabled only on page refresh). I have tried below code so far.

import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  didAction: boolean = false;
  private action() {
    this.didAction = true; //what to do here to disable only the clicked button in the row
  }
}

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Action</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
              <p-button (click)="action()" class="pointer" label="Click" [disabled]="didAction()"></p-button>
            </td>
        </tr>
    </ng-template>
</p-table>

Answer 1

Have you posted all the code here? I think we can better help you if you do.

The problem is that you are using a global variable for disable one or more specific cars in this example.

I think you should:

• Get the index of the row and pass that to the function that disable the car.
• Add a disabled property to disable specific.

---

HTML file:

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Action</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car let-i="rowIndex">
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
              <p-button (click)="action(i)" class="pointer" label="Click" [disabled]="car.disabled"></p-button>
            </td>
        </tr>
    </ng-template>
</p-table>

Typescript file:

import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  cars: car[] = [];
  private action(index: number) {
    cars[index].disabled = true;
  }
}