How to add multiple headers in Angular 5 HttpInterceptor

Question

I\'m trying to learn how to use HttpInterceptor to add a couple of headers to each HTTP request the app do to the API. I\'ve got this interceptor:

Answer 1

  const modifiedReq = req.clone({
      url: this.setUrl(req.url),
      headers: this.addExtraHeaders(req.headers)
    });

And the method:

private addExtraHeaders(headers: HttpHeaders): HttpHeaders {
  headers = headers.append('myHeader', 'abcd');
  return headers;
} 

The method .append creates a new HttpHeaders object adds myHeader and returns the new object.

Using this solution means that you can also use multiple interceptors because you will not overwrite your headers.