How to get the response header using angular

Question

Component:

below is my component where i am calling checkAuthentication() function which is present in service.

signIn() {
    this.loginService.checkAuthentication(this.login).subscribe(
      (resp) => {
        console.log(resp.headers);
        let user = resp.headers.get('info');
        localStorage.setItem('user', JSON.stringify(user));

        let token = resp.headers.get('x-token');
        localStorage.setItem('x-token', token);

        this.router.navigate(['/list']);
      },

      (error) => {
        this.login = new Login();
        console.log(error.error.message);
        Swal(error.error.message, 'Try again.', 'error');
      }
    );
  }

Service:

This my service, here i am calling rest api. in rest api i am paiing the header

constructor(private http:HttpClient) { }

  checkAuthentication(login): Observable<any> {
      let path = Constant.BASE_URL + 'api/login';
      const header = {
        headers : new HttpHeaders({
          'Content-Type': 'application/json'
        })
      };

      return this.http.post(path, login, header);
  }

Below image is the reponse header i am getting on browser.

console.log(resp.headers); is showing undefined

`return this.http.post(path, login, { headers, observe: 'response' });` should do the trick. — , Nov 20 '18 at 11:05
Possible duplicate of [Read response headers from API response - Angular 5 + TypeScript](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript) — Tushar Walzade, Nov 20 '18 at 11:13
@SangramBadi then please provide a [mcve] of your issue, because as per [the documentation](https://angular.io/guide/http#reading-the-full-response), this is the way to go. — , Nov 20 '18 at 14:51
@trichetriche i combined your commented ansewer with Biplab Malakar answer, i resolved this — Sangram Badi, Nov 21 '18 at 08:53

score 0 · Answer 1 · answered Nov 20 '18 at 11:35

You need to filter your response

constructor(private http:HttpClient) { }
    checkAuthentication(login): Observable<any> {
          let path = Constant.BASE_URL + 'api/login';
          const header = {
            headers : new HttpHeaders({
              'Content-Type': 'application/json'
            })
          };

          return this.http.post(path, login, header).map((res:Response)=> res);
      }

Now in the subscription you have full response with header and body also. Now you can extract header like

 signIn() {
    this.loginService.checkAuthentication(this.login).subscribe(
      (resp) => {
        console.log(resp.headers);
        let user = resp.headers.get('info');
        localStorage.setItem('user', JSON.stringify(user));

        let token = resp.headers.get('x-token');
        localStorage.setItem('x-token', token);

        this.router.navigate(['/list']);
      },

      (error) => {
        this.login = new Login();
        console.log(error.error.message);
        Swal(error.error.message, 'Try again.', 'error');
      }
    );
  }

by combing comment of @trichetriche and your answer i resolved this — Sangram Badi, Nov 21 '18 at 08:51

score 0 · Accepted Answer · answered Nov 21 '18 at 08:51

I changed my service to below. By combining answer of @Biplab Malakar and comment of @trichetriche. now it's working

checkAuthentication(login: Login): Observable<any> {
    let path = Constant.BASE_URL + 'api/login';

    return this.http.post(path, login, {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/json'),
      observe: 'response'
    }).map((res) => res);
  }

How to get the response header using angular

2 Answers2