Latest Update for Angular 4.3+

The recommended way is to use HttpClient instead of the old Http

For detailed instructions, refer to the official guide here

Below is a sample code snippet for making POST requests:

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 Method

An alternative method using URLSearchParams is as follows:

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

Updated Approach in Oct/2017

Starting from Angular 4+, you no longer need to specify headers or convert to string with .toString(). Here's an updated example:

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

For HTTP POST and PUT methods:

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()));
      }
    )

For GET and DELETE methods:

    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 sending JSON data with 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()));
      }
      )

Angular2 has made it easier in newer versions, as there is no longer a need to manually set the Content-Type header and encode the body if you provide the right object type as the body.

You can achieve this simply by:

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

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

This approach allows Angular to handle encoding the body and setting the correct Content-Type header automatically.

P.S. Remember to import URLSearchParams from @angular/http, or else it won't function properly.

Here's a comprehensive solution for the question:

login(user, pass) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let data = new URLSearchParams();
        data.append('username', user);
        data.append('password', pass);
        let body = data.toString()
        return this.http.post('http://localHost:3000/login', body, {headers:headers})
            .map((response: Response) => {
                // Check if login was successful
                console.log(response);
                var res = response.json();
                console.log(res);
                if (res.success){
                    let userData = response.json();
                    if (userData && userData.token) {
                        // Store user details and token in local storage to maintain login state
                        localStorage.setItem('currentUser', JSON.stringify(userData)); 
                    }
                }
                else{
                    return res;
                }
            });
    }

For those who are using HttpClient instead of Http, the previous answers may no longer be relevant. It can be frustrating when you import URLSearchParams but realize it doesn't work without .toString() and explicit headers.

With HttpClient, make sure to use HttpParams instead of URLSearchParams. Pay attention to the body = body.append() syntax to include multiple parameters in the body since HttpParams is immutable:

login(username: string, password: string): Promise<boolean> {
    if (!username || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', username);
    body = body.append('password', password);

    return this.http.post(this.apiURL, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }

If you are facing challenges with angular version 4+ (specifically 4.3.6), here is a sample code snippet that I found effective.

To begin, make sure to include the necessary imports

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

Next, here is an example of an API function. This particular one is for a login feature but can be customized to suit your requirements.

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // Check if login was successful (based on response status)
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // Save user details and JWT token in local storage to maintain user session
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}

angular: 
    NewMethod(nameValue: any): Observable<any> {
    let parameters = new HttpParams();
    parameters = parameters.append('categoryName', nameValue);

    return this.http.post('yoururl', '', {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: parameters,
      responseType: "json"
    })
  }

api:   
  [HttpPost("[action]")]
  public object NewMethod(string category)

Instead of struggling with various approaches involving multiple parameters, I found that using a single object works much better.

api:

    [HttpPut]
    [Route("addfeeratevalue")]
    public object AddFeeRateValue(MyValeObject val)

angular:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders());


private getPutHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({
        headers: headers
        , withCredentials: true // optional when using windows auth
    });
}