HttpClient POST request using x-www-form-urlencoded

I'm trying to make a POST request with x-www-form-urlencodedcontent type header as follows:

login(username, password): Observable<any> {
    return this.http.post('/login', {
      username: username,
      password: password
      },
      {
        headers: new HttpHeaders()
          .set('Content-Type', 'x-www-form-urlencoded')
      }
      );

Unfortunately my API says that I sent empty username and password.

so I decided to make a postman request to my login endpoint and see where the problem comes from, and the postman request did return the username and password.

How comes that when I'm posting from postman my API return my username and password and when I post from my Angular app my API returns empty values? Is there anything I'm missing?

You're posting JSON data to the API instead of form data. The snippet below should work.

login(username, password): Observable<any> {
  const body = new HttpParams()
    .set('username', username)
    .set('password', password);

  return this.http.post('/login',
    body.toString(),
    {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
    }
  );
}

There is an easier way than the others approaches described here.

This is what worked for me with Angular 7:

const payload = new HttpParams()
  .set('username', username)
  .set('password', password);
  
this.http.post(url, payload);

No need to explicitly set the header with this approach.

Note that the HttpParams object is immutable. So doing something like the following won't work, it will give you an empty body:

const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);
  
this.http.post(url, payload);

You can as well as load your data from an object

login(username, password): Observable<any> {
    const body = new HttpParams({
        fromObject: {
            username,
            password,
            ...extraData, // if any 
        }
    });

    return this.http.post('/login',
        body.toString(),
        {
            headers: new HttpHeaders()
                .set('Content-Type', 'application/x-www-form-urlencoded')
        }
    );
}

You can to make a post request as below.

login(email:string, password:string):Observable<User>{
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/x-www-form-urlencoded')
    let params = new HttpParams().set('user', JSON.stringify({email: email,password:password}));
    return this.http.post<User>(`${MEAT_API_AUX}/login`,
    {},{headers: headers,params:params})
        .do(user => this.user = user);
}

after that you have to make subscribe.