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?