I am trying make an http get() request by passing some values in headers, Now i am replacing the headers like this:

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Injectable } from '@angular/core';

import {ICustomer} from 'src/app/models/app-models';



@Injectable({

  providedIn: 'root'

})

export class MyService {

private baseUrl = '....api url....';

public authKey = '....auth_key......';



  constructor(private http: HttpClient) { }



  public async AllCustomers(): Promise<ICustomer[]> {

   const apiUrl = `${this.baseUrl}/customers`;



   return this.http.get<ICustomer[]>(apiUrl ,

    {headers: new HttpHeaders({Authorization: this.authKey})}).toPromise();<=====

  }



}

When i replace the headers like this:

headers: new HttpHeaders({Authorization: this.authKey})

The default headers values(i,e Content-Type : application/json) will be replaced by the above headers.

Instead of replacing the headers how can i add custom headers, I tried like this:

  public async AllCustomers(): Promise<ICustomer[]> {

    const apiUrl = `${this.baseUrl}/courses`;

    const headers = new HttpHeaders();

    headers.append('Authorization', this.authKey);

    headers.append('x-Flatten', 'true');

    headers.append('Content-Type', 'application/json');



    return this.http.get<ICustomer[]>(apiUrl).toPromise();

  }

What's wrong with my approach, I am new to angular, Any help?