Angular 4 POST to php my sql not working - php

Question

I Am trying to make a simple login check , using angular 4 , php my sql .
Now i am able to send the details to the php , but i am not able to receive the status after it , i have no idea why.
Simply, i want to check if the username and password are correct, then return some json , else , return false result.
Help please.
Angular :
import { Injectable } from '#angular/core';
import { Http, Response ,RequestOptions,Headers} from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
#Injectable()
export class appService {
postResponse:any ;
status;
constructor(private http:Http) { }
insertData() {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:80/angularsql/sql.php',JSON.stringify({firstName:'Joe',lastName:'Smith333'}),{headers:headers})
.map((res: Response) => res.json())
.subscribe((res:'') => this.postResponse = res);
}
}
PHP
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$data = json_decode( file_get_contents('php://input'),true );
$fname = $data['firstName'];
$lname = $data['lastName'];
$con = new mysqli('localhost','root','','angular');
if($fname=='anan' && $lname=='kassis') {
$sql = "insert into users_tbl(firstName,lastName) values('".$fname."','".$lname."')";
$result = $con->query($sql);
$data = [ "status" => "CORRECT" ];
echo json_encode($data);
}
else {
$data = [ "status" => "wrong details inserted" ];
echo json_encode($data);
}
//echo $result;
?>

Answer 1

I think you should change
subscribe((res:'') => this.postResponse = res);
to
subscribe(res: any =>
{
this.postResponse = res);
console.log(res.status)
}
Here, res will be an object and you can console.log(res.status)
Edit: You cannot have the console.log after the subscribe call, because at this stage the http call has not received a response yet.
Other things to consider:
And probably set json type headers in your php response
header('Content-Type: application/json');
Also, you should use parametrized queries (like PDO) when querying your database

Answer 2

I think this line is the issue:
.subscribe((res:'') => this.postResponse = res);
Change your call into:
insertData(): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:80/angularsql/sql.php', JSON.stringify({
firstName: 'Joe',
lastName: 'Smith333'
}), { headers: headers })
.map(res => res.json())
.catch((error: any) => Observable.throw(
{ message: error.json().message, details: error.json().details }));
}
You should subscribe to the insertData() method. And in your .post() you map the result and you catch the errrors (if any).