Q: angular 2: some class members undefined from google maps callback I am trying to get distance between 2 addresses using google maps, 
I want to emit distance to parent component.
but I have problem, that some elements of the child class are not available in that child's google callback method.
this.directionsDisplay goes to undefined,
also event emitter member is undefined.
So in Child component i do following steps
event emitter is declared in class head as follow (I want to emit distance between 2 points.):
  @Output() onDirectionSet=new EventEmitter<number>();

I init data also in OnInit function
  ngOnInit(){
     if (AppDefinitions.isOffline)
        return;
      this.directionsDisplay = new google.maps.DirectionsRenderer();
      this.map = new google.maps.Map(document.getElementById('map'), {
          mapTypeControl: false,
          center: {lat: 50.979571, lng: 10.314687},
          zoom: 5
        });
   }

and then I am setting direction using following function:
      setDirection(origin:string, destination:string){
          this.directionsService = new google.maps.DirectionsService();

          if (AppDefinitions.isOffline)
            return;

          this.directionsService.route({
              origin: origin,
              destination: destination,
              travelMode: 'DRIVING'
            }, 
/*google callback*/
            function(response:any, status:any){
                console.log(this.directionsDisplay);
                this.directionsDisplay.setMap(this.map);

                if (status === 'OK') {
                      this.directionsDisplay.setDirections(response);
                      var directionsModel = new DirectionsModel;
                      directionsModel.distance = response.routes[0].legs[0].distance.value;
                      console.log('distance:'+directionsModel.distance);
                      this.onDirectionSet.emit(directionsModel.distance);
                } else {
                      window.alert('Directions request failed due to ' + status);
                }
           });
        }

I am calling setDirectionFunction in ngOnChanges:
this.from_address and this.to_address are component Inputs
  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {   
    if (this.from_address!==undefined && this.to_address!==undefined)
      this.setDirection(this.from_address, this.to_address);
  }

error from console about undefined class member this.directionsDisplay is here:
error

A: The context of your google call back is the undefined. you could use an arrow function to attach the call back function or bind the context to the callback function.
this.directionsService.route({
          origin: origin,
          destination: destination,
          travelMode: 'DRIVING'
        }, 
       /*google callback - use arrow function*/
       (response:any, status:any) => {
            console.log(this.directionsDisplay);
            this.directionsDisplay.setMap(this.map);

            if (status === 'OK') {
                  this.directionsDisplay.setDirections(response);
                  var directionsModel = new DirectionsModel;
                  directionsModel.distance = response.routes[0].legs[0].distance.value;
                  console.log('distance:'+directionsModel.distance);
                  this.onDirectionSet.emit(directionsModel.distance);
            } else {
                  window.alert('Directions request failed due to ' + status);
            }
       });

