How can I update the next cell's value in ngx-datatable based on the selection of value in a dropdown?

Question

I'm trying to update another cell value, in the first cell I have a dropdown, and based on the selection of value in dropdown, I have to update the values of dropdown in next column.

How can I achieve this using ngx-datatable-columns?

This is the cell that contains the dropdown:

 <ngx-datatable-column name="status" prop="operationStatus" >
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

        <select class="status" (change)="changeStatus($event, rowIndex)">
          <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
            </option>
        </select>

    </ng-template>
  </ngx-datatable-column>

This is the cell that needs to be updated:

<ngx-datatable-column name="casette" prop="cassette1Bill">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span>Kassette 1</span>
    </ng-template>
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
          <div>{{value}}</div>

    </ng-template>
  </ngx-datatable-column>

Answer 1

Actually, you are already have the entire row's data at your disposal, since you are using let-row on your columns. Since you have assigned row to let-row , you can pass row (which is an object containing that row data) to your (change) event binding.

On your .html file, simply make the following changes on that column with that dropdown:

<ngx-datatable-column name="status" prop="operationStatus" >
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

    <select class="status" (change)="changeStatus(row)">
      <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
      </option>
    </select>

  </ng-template>
</ngx-datatable-column>

Basically, we have passed the row details row to changeStatus()

And on your component.ts, simply assign that value to the cassette1Bill column

changeStatus(row) {
  //console.log(row)
  row.cassette1Bill = '22';
}

This should work. That column should reflect the updated values from that selected dropdown value.