I am passing an object from a parent component to a child component.

Relevant parent html:

<app-child-component
   [parentObj]="parentObj"
   (childUpdated)="childUpdated($event)">
</app-child-component>

Child component:

@Input('parentObj') parentObj: ParentObjType;
parentObjToUpdate: ParentObjType;

I take a copy of the parentObj within the child component to prevent a circular reference issue I previously had:

Child component:

ngOnInit() {
        this.parentObjToUpdate = JSON.parse(JSON.stringify(this.parentObj));
    }

When the child gets updated, an event is emitted containing the parentObjToUpdate which is listened to by the parent:

Child component:

@Output() childUpdated = new EventEmitter<ParentObjType>();

The childUpdated method is then called in the parent component:

originalObj: ParentObjectType;

childUpdated(updatedObj: ParentObjectType) {
  this.originalObj = updatedObj; // THIS IS THE LINE THAT IS CAUSING THE ISSUE (SEE BELOW)
  this.httpService.updateObj(this.originalObj).subscribe(() => {
     console.log("END POINT HIT");
 });
}

This is the httpService:

 public updateObj(originalUpdatedObject: ParentObjectType) {
            return this.http.post<any>(`http://localhost:12345/api/updateObj`, originalUpdatedObject);
        }

When I comment out the line above: this.originalObject = updatedObj;, the .NET end point is being hit and the above console.log gets triggered. When this line is not commented out, the end point is not being hit and the subscription does not get triggered. There are no errors in the console. I've checked the network tab on the Chrome developer tools and no request is being made to the API.

I'm really confused about why this is happening?

Please note - I cannot just pass in the updatedObj into the http service method as I need to update the original object in my scenario. Also, the names of the objects/components etc have been changed from the actual names.