[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

POST

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

}