getting checkbox value from ag-grid column

Question

I have a checkbox in an ag-grid that I'm displaying the following way:

  {header: 'Cancel', 
    field: 'IsCancel', 
    cellRenderer: params => {
      return `<input type='checkbox' ${params.value ? 'checked': ''} />`
    }  
  }

What I'm trying to achieve is that when the user clicks the Save button, I go thru each row and find out which checkbox has been checked.

I've tried using the code below to find out which checkbox has been checked. Unfortunately, node.data.IsCancel is false even when I check a checkbox in the ag-grid:

  saveCustomer() {
    this.api.forEachNode(this.printNode)
  }

  printNode(node, index) {
    console.log('Customer Number is: ' + node.data.CustomerNumber);
    console.log('Cancel is: ' + node.data.IsCancel);
    if (node.data.IsCancel.checked) {
      console.log('Customer Number in checked is: ' + node.data.CustomerNumber);
    }
  }

Here is all of the code:

cancellation.component.html

<div *ngIf="loadCancellation">
  <ag-grid-angular class="ag-fresh"
    [columnDefs]="columnDefs"
    [rowData]="customerNames"
    (gridReady)="onGridReady($event)"
    class="ag-theme-balham">
  </ag-grid-angular>
  <br/>
  <button mat-raised-button color="primary" (click)="saveCustomer()">Save</button>
</div>

cancellation.component.ts

import { Component, Input, AfterViewInit, OnInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerNameCancellation } from '../customername-cancellation';
import { ColDef, GridApi, ColumnApi } from 'ag-grid-community';

@Component({
  selector: 'app-cancellation',
  templateUrl: './cancellation.component.html',
  styleUrls: ['./cancellation.component.css']
})
export class CancellationComponent implements OnInit {
  @Input('zipCode') zipCode: string;
  @Input('lastName') lastName: string;
  customerNames: Array<CustomerNameCancellation>;

  private api: GridApi;
  columnApi: ColumnApi;
  columnDefs: ColDef[];
  loadCancellation: boolean;
  params: any;

  constructor (private customerNameService: CustomerNameService) {
   this.columnDefs = this.createColumnDefs(); 
  }

  ngOnInit() {
    this.customerNameService
    .getCustomerNames(this.zipCode, this.lastName)
    .subscribe(data => {this.customerNames = data;})
    console.log("finished loading customers");
    console.log("zipcode is: " + this.zipCode);
    console.log("lastname is: " + this.lastName);
    this.loadCancellation = true;
  }

  onGridReady(params) : void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.sizeColumnsToFit();
    this.params = params;
  }

  private createColumnDefs() {
    return [
      {header: 'Customer Number', field: 'CustomerNumber', sortable: true, filter: true},
      {header: 'First Name', field: 'FirstName', sortable: true, filter: true},
      {header: 'Middle Name', field: 'MiddleName', sortable: true, filter: true},
      {header: 'Last Name', field: 'LastName', sortable: true, filter: true},
      {header: 'Address', field: 'Address1', sortable: true, filter: true},
      {header: 'City', field: 'City', sortable: true, filter: true},
      {header: 'State', field: 'StateCd', sortable: true, filter: true},
      {header: 'Zip Code', field: 'ZipCode', sortable: true, filter: true},
      {header: 'Magazine Code', field: 'MagazineCd', sortable: true, filter: true},
      {header: 'Cancel', 
        field: 'IsCancel', 
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked': ''} "/>`
        }  
      },
      {header: 'Cancellation Date', field: 'CancellationDate', sortable: true, filter: true}
    ]
  }

  saveCustomer() {
    this.api.forEachNode(this.printNode)
  }

  printNode(node, index) {
    console.log('Customer Number is: ' + node.data.CustomerNumber);
    console.log('Cancel is: ' + node.data.IsCancel);
    if (node.data.IsCancel.checked) {
      console.log('Customer Number in checked is: ' + node.data.CustomerNumber);
    }
  }

  public checkedVal() {
    console.log(this.params.node.data);
    console.log(this.params.value); 
  }

}

Update I also tried using checkboxSelection: true. But it shows "true" or "false" right next to the checkbox.

Updated #2

I used checkboxSelection: true.

There are two issues:

1) The value "true" or "false" shows next to the checkbox. Please see the image.

2) For those checkboxes that already come back as "true" from the database, the checkbox isn't already checked.

Here is the updated code:

import { Component, Input, AfterViewInit, OnInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerNameCancellation } from '../customername-cancellation';
import { ColDef, GridApi, ColumnApi } from 'ag-grid-community';

@Component({
  selector: 'app-cancellation',
  templateUrl: './cancellation.component.html',
  styleUrls: ['./cancellation.component.css']
})
export class CancellationComponent implements OnInit {
  @Input('zipCode') zipCode: string;
  @Input('lastName') lastName: string;
  customerNames: Array<CustomerNameCancellation>;

  private api: GridApi;
  columnApi: ColumnApi;
  columnDefs: ColDef[];
  loadCancellation: boolean;
  params: any;

  constructor (private customerNameService: CustomerNameService) {
   this.columnDefs = this.createColumnDefs(); 
  }

  ngOnInit() {
    this.customerNameService
    .getCustomerNames(this.zipCode, this.lastName)
    .subscribe(data => {this.customerNames = data;})
    console.log("finished loading customers");
    console.log("zipcode is: " + this.zipCode);
    console.log("lastname is: " + this.lastName);
    this.loadCancellation = true;
  }

  onGridReady(params) : void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.sizeColumnsToFit();
    this.params = params;
  }

  private createColumnDefs() {
    return [
      {headerName: 'Customer Number', field: 'CustomerNumber', sortable: true, filter: true},
      {headerName: 'First Name', field: 'FirstName', sortable: true, filter: true},
      {headerName: 'Middle Name', field: 'MiddleName', sortable: true, filter: true},
      {headerName: 'Last Name', field: 'LastName', sortable: true, filter: true},
      {headerName: 'Address', field: 'Address1', sortable: true, filter: true},
      {headerName: 'City', field: 'City', sortable: true, filter: true},
      {headerName: 'State', field: 'StateCd', sortable: true, filter: true},
      {headerName: 'Zip Code', field: 'ZipCode', sortable: true, filter: true},
      {headerName: 'Magazine Code', field: 'MagazineCd', sortable: true, filter: true},
      {headerName: 'Cancel', 
        field:'IsCancel',
        editable: true, 
        sortable: true,
        filter: true,
        checkboxSelection:true 
      },
      // {header: 'Cancel', 
      //   field: 'IsCancel', 
      //   cellRenderer: params => {
      //     return `<input type='checkbox' ${params.value ? 'checked': ''} "/>`
      //   }  
      // },
      {header: 'Cancellation Date', field: 'CancellationDate', sortable: true, filter: true}
    ]
  }

  saveCustomer() {
    // this.api.forEachNode(this.printNode)
    let selectedRows;
    selectedRows = this.api.getSelectedRows();
    console.log(selectedRows);
  }
}

Answer 1

For check box selection you can use checkboxSelection: true in you columnDef instead to use cell render:

this.columnDefs = [
  {
    headerName: 'Name',
    field: 'testName',
    checkboxSelection: true, //HERE !!!!
    width: 150
  }

and than you can easy get rows, when checkbox selected :

someMethod() {
  let selectedRows;
  selectedRows = this.gridApi.getSelectedRows();
  console.log(selectedRows);
  ///than you can map your selectedRows 
  selectedRows.map((row) => {
   console.log(row);
   console.log(row.data);
  });
}

If you need to set checked or not depended on data from dataBase you can use:

     onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
        this.transportApi.getCustomerNames().subscribe((res) => {
          this.rowData = res;
          if (res) {        
 this.transportApi.getSelectedCustomerNames().subscribe((selectedCustomers) => {
                if (selectedCustomers) {
                  this.gridApi.forEachNode((node) => {
                    selectedCustomers.map((customer) => {
                      if (node.data.CustomerNumber=== customer.CustomerNumber) {
                        node.setSelected(true);
                      }
                    });
                  });
                }
              });


            }
          }
        }, error1 => console.log(error1));
      }

Transport method is example use yours in code;