( Ionic 2:Updated ) Passing form values to angular js then passing to php and getting response back



app.ts
=======
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
   
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);




home.html
===========
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Signup</ion-title>
</ion-navbar>
</ion-header>

<ion-content class="login-page">



<ion-list>

<ion-item>
<ion-label fixed>Fullname</ion-label>
<ion-input type="text" [(ngModel)]="fullname"></ion-input>
</ion-item>

<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="text" [(ngModel)]="email"></ion-input>
</ion-item>

<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>

<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="text" [(ngModel)]="password"></ion-input>
</ion-item>

<div padding>
<button (click)="onSignup()" type="submit" primary block>Create</button>


</div>


</ion-list>



</ion-content>



home.ts
========
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';


import {Injectable} from '@angular/core';
import {Http,  Response, Headers, RequestOptions} from '@angular/http';

import {NavController,NavParams } from 'ionic-angular';
import { Component } from '@angular/core';

import 'rxjs/Rx';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})



@Injectable()
export class HomePage {
fullname:any;
email:any;
username : any;
password:any;

dataRecv: any;
logindata:any;
handleError:any;
body:string;


constructor(public navCtrl: NavController,public  http: Http,public navParams: NavParams) {

}






onSignup()
{
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let data=JSON.stringify({fullname:this.fullname,email:this.email,username:this.username,password:this.password});
this.http.post('http://localhost/Outdoorly/postResponse.php',data,headers)
.map(res => res.json())
.subscribe(res => {
alert("success "+res);
}, (err) => {
alert("failed");
});
}




}


get_data.php
=================
<?php

header('Access-Control-Allow-Origin: *');

if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
     
        $postdata = file_get_contents("php://input");
        $request = json_decode($postdata);
        $username=$request->username;
        $password=$request->password;
        echo json_encode("Username is ".$username." and password is:".$password);

}
else
{
    echo "Not allowed";
}

?>