Angular Callback - assign result to component variable

Question

I will get an image from backend in my Angular 12 application with this function:

getProfileImage(filename: string, userId: string, callback) {
        const url = environment.apiEndpoint + 'files/profileimage/' + filename + '/' + userId;
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }
}

I invoke this function like this

ngOnInit() { 
    this.authService.getUser().then(response => {
      this.user = response;

      this.profileService.getProfileImage(this.user.profileImagePath, this.user.id, function(dataUrl) {
        this.profileImage = dataUrl;  // here I get an error
        console.log(this.profileImage);
      });
    });
  }

The error I get is:

core.js:6479  ERROR TypeError: Cannot set properties of undefined (setting 'profileImage')
    at profile.page.ts:29:26
    at reader.onloadend (profile.service.ts:23:17)
    at push.99140._ZoneDelegate.invoke (zone.js:409:1)
    at Object.onInvoke (core.js:28705:1)
    at push.99140._ZoneDelegate.invoke (zone.js:408:1)
    at push.99140.Zone.runGuarded (zone.js:180:1)
    at FileReader.<anonymous> (zone.js:163:1)

So my question is how to assign datgaUrl response to an component variable (which is reachable in html code)

Answer 1

You could try to do like this

var self = this; //in this way you save the context
this.profileService.getProfileImagethis.user.profileImagePath, this.user.id, function(dataUrl) {
    self.profileImage = dataUrl;
    
  });

Doing this, you will save the context in a variabile and you can use it to access the component context.

This is like Matthieu said, but in this way you explicitly declare that "self" variable, otherwise it's created by JavaScript. Hope it helps!