Angular cli and javascript callback function

Question

I'll explain my situation.

I have a external javascript file that has a function like:

searchForSomething(id, callbackFunction);

That method 'searchForSomething' is async and the return is call the callbackFunction. In my component.ts I have:

declare function searchForSomething(id, callbackFunction): any;
...
message: string;
id: number;
...
next(){
  searchForSomething(this.id, this.print);
}

print(result: string) {
  this.message = result;
  console.log(result);
}
...

ERROR: Uncaught ReferenceError: 'message' is not defined

But neither 'this' is defined. My code works using this test:

next(){
  //searchForSomething(this.id, this.print);
  this.print('result as a mock.');
}

I guess that I have a context or scope problem here. I got that when my ts method is called by external javascript, I lost angular references.

What's the rigth way to use call back function into ts? Or I need to review my javascript method to remove 'function' parameter? But it is async, so I can't just remove the callbackFunction, put a return and wait for a result.

This issue has noting to do with Angular or TS. I can be demonstrated in javascript (es6 at least) stackblitz.com/edit/… jsbin.com/cenexacifi/2/edit?js,console — Wilhelmina Lohan
– Wilhelmina Lohan, Commented Mar 13, 2019 at 15:26

Harun Yilmaz · Accepted Answer · 2019-03-13 14:51:13Z

5

This is an issue about scope. When you pass callback function, the function loses its scope.

So, you can convert print to arrow function to make the function's scope where it is defined:

print = (result: string) => {
  this.message = result;
  console.log(result);
}

UPDATE

Also you can use .bind(this) to assign the scope manually if you don't want to use arrow functions.

next(){
  searchForSomething(this.id, this.print.bind(this));
}

edited Mar 13, 2019 at 14:51

answered Mar 13, 2019 at 14:44

Harun Yilmaz

8,5893 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robert Over a year ago

You can read more on this issue here: typescriptlang.org/docs/handbook/functions.html Section: "this and arrow functions"

Harun Yilmaz Over a year ago

@Robert Thanks for extending the answer.

Akostha Over a year ago

@HarunYılmaz thanks, That works! And I undertood a bit more about Javascript and Angular. I used the bind solution.

Harun Yilmaz Over a year ago

Actually the arrow functions are more useful in this context because they keep scope themselves where they are defined. Glad to help btw :)

Collectives™ on Stack Overflow

Angular cli and javascript callback function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related