How to toggle disabled property from button if it's row has been selected by checkbox in a p-datatable

Question

I am currently developing the user interface of a web application using angular6. I have a p-dataTable component (primeNG) with several rows, each row has as a first column a checkbox and as last one a disabled button by default.

The goal is opening a dialog if I select a row by clicking it's checkbox and then clicking it's dialog trigger button after unable that button (and just that one, not the rest of row buttons).

I thought I could get the row selected index and style the button via CSS with nth-child(index) but I read p-columns in a p-datatable doesn't create an index.

It looks like something trivial, but I'm not able to unable just the button of the selected row.

I'll appreciate your help.

That's a simplified markup example:

    <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
        <p-header>
            <div class="ui-helper-clearfix">Example Table</div>
        </p-header>
        <p-column class="checkbox" selectionMode="multiple"></p-column>
        <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
        <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
        <p-column>
            <ng-template>
                <button type="button" class="btn" icon="fa fa-user" [disabled]="??????"></button>
            </ng-template>
        </p-column>
    </p-datatable>

Thanks in advance and greetings!

Answer 1

I've found a solution:

First of all I need a ng-template inside my checkbox p-column in order to have a rowIndex variable to be read in the class component through a function triggered in the event onChange of the checkbox.

There I save this value in a class variable called "indexSelected" that I'll be watching in the ng-template of the buttons p-column. I'll be comparing this rowIndex value with the "indexSelected" to keep disabled or not my buttons.

This is my code:

Template:

   <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
    <p-header>
        <div class="ui-helper-clearfix">Example Table</div>
    </p-header>
    <p-column selectionMode="multiple" [styleClass]="'colsmall'">
        <ng-template let-riCheck="rowIndex" pTemplate="body">
            <p-checkbox  (onChange)="selectRow(riCheck); "></p-checkbox>
        </ng-template>
    </p-column>
    <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
    <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
    <p-column header="Acciones" styleClass="colmedium" frozen="true">
        <ng-template pTemplate="body" let-ri="rowIndex">
            <button type="button" pButton icon="fa-user" (click)="goToEditContact();" [disabled]="indexSelected != ri"></button>
            <button type="button" pButton icon="fa-ellipsis-h" class="ui-button-inverted" (click)="mostrarMasOpciones($event, op)" [disabled]="indexSelected != ri"></button>
        </ng-template>
    </p-column>
</p-datatable>

Class Component:

...

selectRow (index) {
    this.indexSelected = index;
}

...