Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

303
Views
Use parent component's variable, in its method that is invoked by a child component

I'm using a child component:

<app-photo-editor [addPhotoUrlExtension]="'users/add-photo'" [onUploadSuccess]="onUploadPhotoSuccess"
                [deletePhoto]="onDeletePhoto"></app-photo-editor>  

and passing it the onUploadPhotoSuccess function:

 onUploadPhotoSuccess(response: any) {
    if (response) {
      const photo = JSON.parse(response);
      this.member.photoUrl = photo.url;  // offending line
      ...

On the child component, I accept the function, and invoke the parent's function:

export class PhotoEditorComponent implements OnInit {
  @Input() onUploadSuccess: (response: any) => void;

...

this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        this.onUploadSuccess(response);
      }
    }  

This gives an error on the offending line (marked above), saying:

core.js:6498 ERROR TypeError: Cannot set properties of undefined (setting 'photoUrl')
    at PhotoEditorComponent.onUploadPhotoSuccess [as onUploadSuccess] (member-edit.component.ts:67:27)
    at FileUploader.uploader.onSuccessItem (photo-editor.component.ts:60:14)
    at FileUploader._onSuccessItem (ng2-file-upload.js:1326:1)
    at XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (ng2-file-upload.js:1073:29)
    at XMLHttpRequest.wrapFn (zone.js:763:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28679:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)  

Which means this.member is undefined, now on one hand it does makes sense I would have needed to pass it to the child component, but on the other, I THINK this worked as is.. So I'm not sure what's the right solution..

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

This is because you're passing a regular function to another component and therefore the this keyword is not referring to the original component.

You should either use arrow functions for onUploadPhotoSuccess or bind this to it.

onUploadPhotoSuccess = (response: any) => {
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!