Angular HttpClient (5)

http-client-feature.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

/** This class implements some features that should be tested. */
@Injectable()
export class HttpClientFeatureService {

  constructor(
    private http: HttpClient
  ) {}

  login(user: string, password: string): Observable<boolean> {
    const body = new HttpParams()
      .set(`user`, user)
      .set(`password`, password);
    const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });

    return this.http.post(`auth/login`, body.toString(), { headers, observe: 'response' })
      .map((res: HttpResponse<Object>) => res.ok)
      .catch((err: any) => Observable.of(false));
  }

}

This is probably the only way I was able to successfully do a application/x-www-form-urlencoded request with Angular 5. I spent 1 hour looking for a solution.

Great Job, it's really helped me a lot.

Great Job! I was with the same problem!

This worked for me too! Thank you!

Thank you!

Really well done mate...!

Works with Angular 6 too, thanks

There is an easier way though!

let body = new URLSearchParams();
body.set('username', this.username);
body.set('password', this.password);
body.set('grant_type', gtype);
body.set('client_id', clid);
body.set('client_secret', secid);
URLSearchParams() will automatically encode all of the body content in application/x-www-form-urlencoded

HttpParams implements encoding: https://github.com/angular/angular/blob/7.0.0/packages/common/http/src/params.ts#L179-L185

URLSearchParams and HttpParams looks like the same.

Thanks!

Helped a lot. Thanks.

thanks you saved my time..

This helped a lot. Thank you very much!

Thanks!

This is not working in Angular 4, anyone have an idea regarding that?