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);
  }
}

Answer 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