Passing a callback object from parent to child component angular

Question

I have a form component which is parent and a show-results component which is child component. I make an a call to an api and I have to use a callback to retrieve the data. In my service layer I make my call:

postSearchDocument(response: any, callback): void {
  console.log('Response form in service layer: ', response);

  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('POST', this.appConfig.getConfig().apiUrl + '' + this.appConfig.getConfig().searchDocument, true);

  // build SOAP request
  const soapRequest =
    '<?xml version="1.0" encoding="utf-8"?>' +
    '<soapenv:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
    'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
    'xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
    'xmlns:bran="http://www.bottomline.com/soap/branch/">' +
    '<soapenv:Header/>' +
    '<soapenv:Body>' +
    '<bran:CallBranch soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">' +
    '<JSONRequest xsi:type="xsd:string">' +
    JSON.stringify(response) +
    '</JSONRequest>' +
    '</bran:CallBranch>' +
    '</soapenv:Body>' +
    '</soapenv:Envelope>';

  console.log('SOAP REQUEST ');
  console.log(soapRequest.toString());

  xmlhttp.onreadystatechange = () => {
    if (xmlhttp.readyState === 4) {
      if (xmlhttp.status === 200) {
        this.returnValue = xmlhttp.responseText;
        // alert(xmlhttp.responseText);
        console.log('Response : ');
        console.log(xmlhttp.responseText);

        this.documentResponse = JSON.parse(this.returnValue)
      );  
      console.log(this.documentResponse);
      callback.apply(this, [this.documentResponse]);
      // return this.documentResponse;
    }
  }
};

Obviously I pass data from parent to children :

<app-show-results [documentsResponse]="documentsResponse"></app-show-results>

In the parent component I have a onSubmit method that allow me to make a call to my API:

this.apiService.postSearchDocument(this.searchRequest, this.getResponse);

Here is my callback :

getResponse(response): void {
  this.documentsResponse = response;
  console.log('In callback response ', this.documentsResponse);
}

This API call is using SOAP and I added a callback in order to get the response back from the server :

In my child component I do have this variable :

@Input() documentsResponse;

My issue is that i don't display the return value from parent in the child component. I added in my child component a lifecycle hook to monitor changes :

ngOnChanges(changes: SimpleChanges): Promise<any> {
  if (changes.documentsResponse && this.documentsResponse !== null) {
    console.log(this.documentsResponse);
  }
}

What type of changeDetectionStrategy you are using? in the parent and child components? — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 28, 2020 at 4:33
Can you also post parent and child typescript code? to check exact issue — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 28, 2020 at 4:34
I guess i'm using default changeDetectionStrategy ... i didn't set any thing like this. I updated the code — davidvera
– davidvera, Commented Aug 28, 2020 at 7:29
Can you add code that you have inside @Component() decorators — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 28, 2020 at 8:24

Sivakumar Tadisetti · Accepted Answer · 2020-08-28 09:24:24Z

1

As you are using ChangeDetectionStrategy.OnPush change detection will be limited and applicable to some situations only. You need to mark Parent component and child components for check in the next cycle. Try below code

Parent Component

import { ..., ChangeDetectorRef } from '@angular/core'

@Component({})
class ParentComponent {
  documentResponse: any

  ...

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ...

  getResponse(response) {
    this.documentResponse = response;
    this.changeDetectorRef.markForCheck(); // Here is the fix
  }
}

Working stackblitz

answered Aug 28, 2020 at 9:24

Sivakumar Tadisetti

5,0617 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing a callback object from parent to child component angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related