Angular2 – Http POST request parameters

by

Update for Angualar 4.3+

Now we can use HttpClient instead of Http

Guide is here

Sample code

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

Deprecated

Or you can do like this:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

Update Oct/2017

From angular4+, we don’t need headers, or .toString() stuffs. Instead, you can do like below example

import { URLSearchParams } from '@angular/http';

POST/PUT method

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

GET/DELETE method

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

For JSON application/json Content-Type

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. Angular 2 custom form input
  3. Angular 2 – Return data directly from an Observable
  4. How to return value from function which has Observable subscription inside?
  5. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  6. Define global constants
  7. How to use moment.js library in angular 2 typescript app?
  8. Chaining RxJS Observables from http data in Angular2 with TypeScript
  9. How can I declare a global variable in Angular 2 / Typescript? [closed]
  10. Angular 2 Show and Hide an element
  11. Angular 2: Convert Observable to Promise
  12. Angular2 – should private variables be accessible in the template?
  13. How to prepare release version with SystemJS and Gulp?
  14. Angular2 canActivate() calling async function
  15. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  16. How do you deploy Angular apps?
  17. Angular 2 View will not update after variable change in subscribe
  18. Angular2 handling http response
  19. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  20. Angular2 – Share data between components using services
  21. Accessing a property in a parent Component
  22. TypeScript error in Angular2 code: Cannot find name ‘module’
  23. Integrating Material Design Lite with Angular2
  24. Visual Studio Code Automatic Imports
  25. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  26. How to create an Observable from static data similar to http one in Angular?
  27. Angular2 – root relative imports
  28. RxJs Array of Observable to Observable of Array
  29. Angular2 HTTP GET – Cast response into full object
  30. How to deal with http status codes other than 200 in Angular 2

Leave a Comment