How to get response from API using Angular 9 http post request - php

Question

I am using Postman to make POST request to API and save data to DB and I am getting as response {message:"Contact created successfully"}. BUT in Angular I don't get any response. What I am doing wrong?
I have provided a piece of my code below.
Angular Service
add(contactItem: any){
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
const contactApiUrl = "url to api/addContact.php";
return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
map( (response: any) => { console.log(response); }),
catchError(this.handleError)
);
}
Contact.component.ts
//here from the form I pass the data to service add()
onSubmit(contactData){
console.log(contactData);
this.contactService.add(contactData).subscribe();
//this.contactLst = this.contactService.get();
}
addContact.php
//more code here
// create the product
if($contact->create()){
// set response code - 201 created
http_response_code(201);
// tell the user
echo json_encode(array("message" => "Contact was created."));
}
// if unable to create the contact, tell the user
else{
// set response code - 503 service unavailable
http_response_code(503);
// tell the user
echo json_encode(array("message" => "Unable to create contact."));
}
Any help is welcome.

Answer 1

You're not actually returning the response. You are only logging it:
add(contactItem: any){
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
const contactApiUrl = "url to api/addContact.php";
return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
map( (response: any) => response ), // <- return response
catchError(this.handleError)
);
}
To call it, you need to specify what happens in your subscribe callback:
//here from the form I pass the data to service add()
onSubmit(contactData){
console.log(contactData);
this.contactService.add(contactData).subscribe( r => console.log(r) );
//this.contactLst = this.contactService.get();
}