Citizen Citizen - 1 year ago 73
Javascript Question

Callback isolated from component's properties

I am new with TypeScript and Angular 2.

I have a strange problem with Cordova Camera Plugin : when I take a photo, it seems callbacks are isolated from the rest of the component !

Here the code :


import {Component, OnInit} from "@angular/core";

selector: 'app-result',
templateUrl: 'result.component.html'
export class ResultComponent implements OnInit {
status = 0; //VALUE I WANT TO PRINT

constructor() {
this.pictureSource =;
this.destinationType =;

ngOnInit(): void {


test() {
console.log(this.status); //VALUE I PRINT

capturePicture() {
let cameraOptions = {
quality: 100,
destinationType: this.destinationType.FILE_URI
};, this.onCaptureFail, cameraOptions);

onCaptureSuccess(fileURI: string): void {
console.log(this.status); //THROW ERROR

onCaptureFail(error: string): void {
console.log('error', error);



<button (click)="capturePicture()">PHOTO</button>
<button (click)="test()">TEST</button>

Console output :
Console output

When I click on
TEST button
(8 times in this screenshot), I've got console.log whose works.
Then, when I click on
PHOTO button
, take the picture, and come back, I've got
Cannot read property 'status' of null

Then, I click 4 times on
TEST button
and status value appears....

It seems
's callbacks are isolated from the rest of the component, how can we explain that ?

Answer Source

I never used Angular or Cordova, but it looks like a simple loss of this context. The click handler from Angular does respect the components context. But in the line..., this.onCaptureFail, cameraOptions); just hand over a reference to a function and getPicture cannot know your context. One way to solve this, is to bind on this:, this.onCaptureFail, cameraOptions);

Or use an arrow function, or buffer this yourself with a closure, or...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download