Nishanthd Nishanthd - 9 months ago 76
Javascript Question

Access value of the scope variable inside callback function in Angular2

I'm trying to retrieve data from DB and set it to the scope variable.'this' inside a callback not working as a angular2 scope. I don't know why. I tried timeout, zone. gas things, Promise things. I don't really know what they are, so I can't able to make use of it.. please help me to figure this out.

//in service.ts
listFriends(callback) {
result_data = [];

db.transaction(function(tx) {

tx.executeSql('SELECT * from mytable', [], function(tx, results) {

length = results.rows.length;

for (i = 0; i < length; i++) {


}, null);


//in component.ts
public allmyFriends: any;
public self = this;
public test;
constructor(myFriendService: MyFriendService) {

this.myFriendService = myFriendService;
this.myFriendService.listFriends((response) => {
//trying to set value to the scope variable.but not working
this.test="test working";
//same as above
this.allmyFriends = response;
//getting the response from the service successfully
console.log("in list" + this.allmyFriends);

} );

Answer Source

When you said that you tried zone. What do you mean exactly? Do you inject NgZone and execute code within it.

This question could give you some hints: View is not updated on change in Angular2.

From where do you get your map instance. If it's instantiated outside a zone, Angular2 won't be able to detect updates of the mapLatitudeInput attribute.

You could try something like that:

export class MapComponent {
  constructor(ngZone:NgZone) {
    this.ngZone = ngZone;

  someMethod() {
    this.myFriendService.listFriends((response) => { => {
        this.test="test working";
        this.allmyFriends = response;
        console.log("in list" + this.allmyFriends);

This question could be also related to your problem: Angular2 child property change not firing update on bound property.

Hope it helps you, Thierry