How I add Headers to http.get or http.post in Typescript and angular 2?

Be sure to declare HttpHeaders without null values.

    this.http.get('url', {headers: new HttpHeaders({'a': a || '', 'b': b || ''}))

Otherwise, if you try to add a null value to HttpHeaders it will give you an error.

I have used below code in Angular 9. note that it is using http class instead of normal httpClient.

1. so import Headers from the module, otherwise Headers will be mistaken by typescript headers interface and gives error

   import {Http, Headers, RequestOptionsArgs } from "@angular/http";

2. and in your method use following sample code and it is breaked down for easier understanding.

   let customHeaders = new Headers({ Authorization: "Bearer " + localStorage.getItem("token")});
   const requestOptions: RequestOptionsArgs = { headers: customHeaders };
   return this.http.get("/api/orders", requestOptions);
   

This way I was able to call MyService

private REST_API_SERVER = 'http://localhost:4040/abc';

public sendGetRequest() {
  const myFormData = { email: '[email protected]', password: '123' };
  const headers = new HttpHeaders();
  headers.append('Content-Type', 'application/json');

  this.httpClient.post(this.REST_API_SERVER, myFormData, {
    headers: headers,
  })
  .subscribe((data) => {
    console.log(data, myFormData, headers);
    return data;
  });
}

This is my version from Angular 13 (2+ & services!) using RXJS subscribe, setting a header for getting data in a different language, where the backend looks for the "lang" header that's set, so easily adaptable for any scenario where you want to send custom headers. Of course you need to do something with them server-side.

The service is called from the component with a parameter that sets a value in the header, that value being passed in as a function argument, in this case "language".
As you can see, the httpOptions new headers is just added to the GET, after the path/params, comma separated.

myService.service.ts :

export class MyService {

  const serverUrl = 'my-site/api';  

  getSomethingById(language: string, id: string): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'lang': language,
      })
    }

    return this.httpClient.get<string>(`${this.serverUrl}/endpointname/${id}`, httpOptions).pipe(
      catchError((err) => {
        throw '1234. Request failed:' + err;
    })
  )
}

my.component.ts

changeLanguage(selectValue: string) {
  let language = 'gb-en';
  if (selectValue === 'Spanish') {
    language = 'ca-es';
  } else if (selectValue == 'American') {
    language = 'gb-en';
  }

    // the important bit: 
  this.myService.getSomethingById(language, this.id).subscribe({
    next: (res) => {
      this.variableName = res;
    },
    error: (error) => {
      console.error('5678:', error);
    },
    complete: () => {
      this.callMyOtherFunction();
    },
  })
}

This is a solution for Angular 17.

Do this step to use http service for standalone component.

1. Open Main.ts file

2. Import provideHttpClient from Angular common module like this:

   import {provideHttpClient} from '@angular/common/http';
   

3. Add provideHttpClient() in providers array like this:

    bootstrapApplication(AppComponent, {
        providers: [provideHttpClient()]
    })
   

this.http.get('url',  headers: new HttpHeaders({ 'ApiKey': 'P@ssw0rd', 'DbName': 'MES-QTY'})})

Please Try this..! it's Worked for me..!