[Angular] Send Data via HTTP using Angular HttpParams

Obviously in a real world application we do not only fetch data from the backend, but we also send data to be stored permanently on the server side. The HttpClient gives us different options for achieving this. In this lesson we will look at how to attach parameters to our request URL, by manually concatenating the URL by ourselves, by using the HttpParams object and also how we can send entire objects in a POSTrequest body.

 

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

export interface Person {
  name: string;
}

@Injectable()
export class PeopleService {

  constructor(private http: HttpClient) {}

  fetchPeople(): Observable<Person> {

   // The same as /api/v1/people?id=2&includeName=false
     const params = new HttpParams()
       .set('id', '2')
       .set('includeName', 'false');

     return this.http
       .get<Person>('/api/v1/people', {
         params
      });
  }

}