HOw to POST parameters to Web API using url


I need to develop an App which need to pass data to web Api using url

Ex: Url :

to above should URL my app should pass user name, password etc as JSON how to do this…???

import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';


// Set post
let post = {};

// Set headers
let headers = {};

// Set request options
let RequestOpts = new RequestOptions({ headers: new Headers(headers) });

// Call backend, post, RequestOpts)
	.map((res: Response) => res.json());
import { Http, Headers, URLSearchParams, Request, RequestOptions, RequestMethod } from '@angular/http';
     let headers = new Headers();
        headers.append('HeaderKey', HeaderValue);
        let params: URLSearchParams = new URLSearchParams();
        params.set('paramKey', paramValue);
        params.set('paramKey', paramValue);
        let options = new RequestOptions({
          method: RequestMethod.Post,
          url: extended URL+"parameters you want to pass",
          search: params,
          body: this.yourBody,
          headers: headers
        this.http.request(new Request(options))
          .map(res => res.json())
          .subscribe(data => {
    }, err => {
            console.log("ERROR!: ", err);

this POST method call would work for you

This is my form data home.html

 <form [formGroup]="form" (ngSubmit)="submit(form.value)">
   <ion-card text-center class="registercard">

     <ion-title class="title">
       Join with KisanRaja

      <ion-label floating>First Name</ion-label>   
      <ion-input type="text" [formControl]="form.controls['firstname']"></ion-input>

      <ion-label floating>Last Name</ion-label>   
      <ion-input type="text" [formControl]="form.controls['lastname']"></ion-input>

      <ion-label floating>Email</ion-label>   
      <ion-input type="email" [formControl]="form.controls['email']"></ion-input>

      <ion-label floating>Mobile</ion-label>   
      <ion-input type="tel" [formControl]="form.controls['phone']"></ion-input>

      <ion-label floating>Password</ion-label>   
      <ion-input type="password" [formControl]="form.controls['password']"></ion-input>

      <ion-label>I accept terms and conditions</ion-label>
      <ion-checkbox color="dark" checked="true" [formControl]="form.controls.checked" ></ion-checkbox>



        <!-- Float the icon left -->
        <button ion-button icon-left outline [disabled]="!form.valid" >LOG IN</button>

This is my home.ts

  form: FormGroup;
  constructor(public navCtrl: NavController, fbld: FormBuilder,public navParams: NavParams, public alertCtrl:AlertController) {

    this.form ={
        'firstname': ['', Validators.compose([Validators.required])],
        'lastname': ['', Validators.compose([Validators.required])],
        'email': ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9-_]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$')])],
        'phone': ['',Validators.compose([Validators.required,Validators.minLength(10)])],
        'checked':[null, Validators.required]

this much i did but i am not getting how to move forword

what is this.yourBody in this.