Use variables in gridOptions in ag-grid for Angular 2

Question

I'm working on a table in my Angular 2 application. I'm using ag-grid. this is my gridOptions

        this.gridOptions = <GridOptions>{

        onGridReady: (() => {
            this.gridOptions.api.sizeColumnsToFit();
            this.gridOptions.onFilterModified = function () {
                console.log("Value Changed")
            }
        })
    }

This code works fine. If i change the value in the search field, i will get the text "Value Changed" in the console. I want to use a variable in the OnFilterModified function that is defined outside that function , but it doesn't work.

console.log(this.) after the dot i only get onGridReady function. That's it. How can i access other functions/variables in the OnFilterModified function?

Sean Landsman Sean Landsman · Accepted Answer · 2016-11-21T13:34:16

This isn't really an ag-grid or angular 2 quesion, but rather a javascript scoping one.

In the function (and I assume you're just using javascript here, not typescript) "this" isnt the out scope, but rather the functions, which isn't useful.

The easiest fix for you is to do the following:

    var that = this;
    this.gridOptions = <GridOptions>{
        onGridReady: (() => {
            that.gridOptions.api.sizeColumnsToFit();
            that.gridOptions.onFilterModified = function () {
                console.log(that.gridOptions)
                console.log("Value Changed")
            }
        })
    };

I'd check out this (there are many articles on this subject) for more information about JavaScript scope: http://ryanmorr.com/understanding-scope-and-context-in-javascript/ for a better understanding of the issue.

Use variables in gridOptions in ag-grid for Angular 2

1 Answers