How to do two-way binding in Ag-grid

Is it possible to do a two way binding in vanilla Javascript?

I am trying to do a two-way data binding in ag-grid and currently, I am only displaying the data via checkbox and no binding:

columnDefs: [
   {headerName: "HeaderA",field: "fieldA", width: 150, editable: true,
    cellRenderer: params => {
        return `<input type='checkbox' ${params.value == 'Y' ? 'checked' : ''} />`
    }
   }
]

I would like to do a two-way data binding for this checkbox so that by checking the checkbox, I am changing the cell-value as well.

At the moment, my grid performs very similar to this plunker: https://plnkr.co/edit/cV5wFLY4nnyQgVIcnGrF?p=preview

[You can click on the checkbox, but if you double-click on the cell itself to see the cell-value, you’ll see that the cell-value hasn’t changed]

I would grealy appreciate any help/advice!

Answer

EDIT: the question no longer references AngularJS, but this answer still does.

Yes, it’s possible. AngularJS uses vanilla Javascript to achieve the two-way bindings, so that we don’t have to.

However, if you are using the AngularJS framework then you should probably use the tools it already offers.

If you want to perform binding without using the built-in directives, e.g. ng-model, ng-bind, and {{}}, consider $scope.$watch and $scope.$watchCollection, these AngularJS methods are what the built-in AngularJS directives use to set up binding.

If you are using components, use $onChanges or $doCheck.