Angular 2 function inside callback value not updating view

Question

I have created function and inside function i\'m calling one callback function after callback response I have update string variable but this string variable not updating my vie

Answer 1

You just need to use ArrowFunction (()=>) and ChangeDetectionRef as shown below,

import {Injectable, ChangeDetectorRef } from 'angular2/core';  //<<<===here

export class ViewComponent {
    getAddress : string;
    public totlaBalance : string;

     constructor(private ref: ChangeDetectorRef){}             //<<<===here

     getBalance():void{
             var self = this;
             getBalanceData(this.getAddress,(error,res)=>{    //<<<===here
                 console.log(res);
                 self.totlaBalance = res;
                 self.ref.detectChanges();                    //<<<===here
             });
     }
}

Answer 2

The callback logic should be run within Angular Zone.

import { Component, NgZone } from '@angular/core'; 

@Component({
  selector: "myview"
  templateUrl: 'app/view/myview.component.html'
})

export class ViewComponent {
  getAddress: string;
  public totalBalance: string;

  constructor(private ngZone: NgZone) {}

  getBalance(): void {
    getBalanceData(this.getAddress, (error, result) => this.ngZone.run(() => {
      console.log(result);
      this.totalBalance = result;
    }));
  }
}