ag-grid with angular checkbox change not getting updated in model

Question

I am using ag grid community version with angular 6. I have a single character (Y/N) as one of the attribute in json response. I am able to display the checked value in UI

cellRenderer: params => {
    return `<input type='checkbox' ${params.value == 'Y' ? 'checked' : ''} />`;
}

When I change the value in UI the rowData is not getting updated. I tried to (change)="onChange($event)" but does not seem to work. Do I need to write a custom Cell Rendered and call some ag grid api to register the change?

Any code sample will be much appreciated.

Thanks

Use a function cell renderer only when it is a plain html (read only). If you want a cell renderer to respond to events or include angular directives, then you should implement a custom cell renderer component — Pratik Bhat

java1977 java1977 · Accepted Answer · 2018-11-16T16:08:48

this worked for me

import {Component} from "@angular/core";

    import {ICellRendererAngularComp} from "ag-grid-angular";

    @Component({
      selector: 'checkbox-cell',
      template: `<input type='checkbox' [checked]="params.value == 'Y' ? true : false" (click)="checkedVal()">`
    })
    export class CheckboxComponentRenderer implements ICellRendererAngularComp {
      public params: any;

      agInit(params: any): void {
        this.params = params;
      }

      public checkedVal() {
        console.log(this.params.node.data);
        this.params.value = this.params.value == 'Y' ? 'N' : 'Y';
        this.params.node.data.valid = this.params.value;
        console.log('checkVal - ' + this.params.value);
      }

      refresh(): boolean {
        console.log('in refresh');
        return false;
      }
    }

ag-grid with angular checkbox change not getting updated in model

1 Answers