The best way to subscribe to selectedRow event?

[dpadula]

What is the best way to subscribe to event when the row is selected?

I need to change the row color when the row is selected no matter where the user click

the following is for one column/cell, but i need to change the row color always the user click in a row.

<data-table-column
  header="Actions">
  <ng-template #dataTableHeader let-item="item">
    <i>Actions</i>
  </ng-template>
  <ng-template #dataTableCell let-item="item">
    <button (click)="carClicked(item)" class="btn btn-sm btn-default">Buy</button>
  </ng-template>
</data-table-column>

Can it be done?
Thanks

[dpadula]

Ok, I found how do this:

<div class="containerTableSET">
<data-table
[items]="items"
[itemCount]="itemCount"
[indexColumn]="false"
[header]="false"
[multiSelect]="true"
[selectColumn]="true"
[selectOnRowClick]="true"
(reload)="reloadItems($event)"
(rowClick)="filaClick($event)" <--
>
and in the component:

filaClick(row) {
console.log(row.row);
console.log(row.row.index);
console.log(row.row.selected);
if (row.row.selected) {
console.log('Added:', row.row.item);
} else {
console.log('Removed:', row.row.item);
}
}

But when I select (click event) one row, the order in which the events occurs are executed reversed (or delayed one step ?).

The output in te console is:

DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
sets.component.ts:74 0
sets.component.ts:75 undefined <-- FIRST VALUE when function is called (click to select)
sets.component.ts:79 Removed: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}
sets.component.ts:73 DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
sets.component.ts:74 0
sets.component.ts:75 true <-- SECOND VALUE when function is called (click to unselect)
sets.component.ts:77 Added: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}
sets.component.ts:73 DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
sets.component.ts:74 0
sets.component.ts:75 false<-- THIRD VALUE when function is called (click to select)
sets.component.ts:79 Removed: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}

Is this the expected behaviour ? I suspect that the moment I'm watching this event is before Angular modify the DOM?

Thanks in advance.

[brunano21]

@dpadula Could you check table.selectedRows into filaClick() function?

[brunano21]

@dpadula Can you create a StackBlitz so we can check together? You can use this as starter.

[dpadula]

Hi Bruno, thanks for the quick answer, I'm editing the StackBlitz that you shared. Check this I've added the callback filaClick to your example starter code.

To the other question if I can access to table.selectedRows the answer is: yes but, it's the same that

filaClick(event) {
   console.log(event.row)
}

In the StackBlitz you can see the console, there are undefined at the beginning and then in the second rowclick the value is true when selected.

filaClick(event) {
   console.log(event.row.selected);
}

[dpadula]

I added an update:

With this you can decide what row is selected to add or remove when it's selected or not:

async filaClick(event) {
  let selected;
  await event.row.selectedChange.subscribe(row => selected = row);
  if (selected) {
    console.log('Add:', event.row.item);
  } else {
    console.log('Remove:', event.row.item);
  }
}

could it be a possible way ?

[brunano21]

Yeah, why not?