Bind a function in Angular2+

Question

I'm working with AgGrid and want to use a localisation.

I add [localeTextFunc]="localeTextFunc" in my <ag-grid-angular HERE></ag-grid-angular>

In my ts file i have :

localeTextFunc(key, defaultValue) {
  console.log("key : ", key);
  console.log("defaultValue : ", defaultValue);
  console.log("this :", this);

  // need to use my translate service
  this.translate....
}

My problem is that this is undefined. How can i bind this to my function ?

Does this answer your question? [Angular2 passing function as component input is not working](https://stackoverflow.com/questions/42574759/angular2-passing-function-as-component-input-is-not-working) — Michał Tkaczyk, Nov 04 '20 at 10:59

score 1 · Accepted Answer · answered Nov 04 '20 at 11:23

One solution is to use Arrow functions. Regular functions always use the scope of the object that called it(window, document, button etc.).

Arrow functions always use the object where it was defined as scope.

Therefore in your .ts file if you make your function like below, it should work:

localeTextFunc=(key, defaultValue)=>{
  console.log("key : ", key);
  console.log("defaultValue : ", defaultValue);
  console.log("this :", this);

  // need to use my translate service
  this.translate....
}

Another solution is to do aomething like this: <ag-grid-angular [localeTextFunc]="localeTextFunc.bind(this)"></ag-grid-angular>

However, I would recommend the first option.

Bind a function in Angular2+

1 Answers1