Read response headers in component file Angular

Question

I need to read the response headers in component file, type of request is post request. need to access the X-Pagination object, but I want to read that in my component file not in service file here is how I tried

  ngOnInit(): void {
    this.paginator.pageSize = 25;
    this.endUserReportService.getDailyReport().subscribe(response => {
      console.log('Response of end-user-report: ', response);
      this.reports = response;
      this.dataSource = new MatTableDataSource(this.reports);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;


      // here is how I'm trying, but its not working

      this.http.get<any>(this.endUserReportService.URL, { observe: 'response' })
        .subscribe(resp => {
          console.log(resp.headers.get('X-Pagination'));
        });


    }, error => {
      console.log('Error occured while end-user fetching report: ', error);
    });

  }

Does this answer your question? [Read response headers from API response - Angular 5 + TypeScript](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript) — Dean Van Greunen, Jan 18 '20 at 06:53
I already read this question, before posting mine, but unfortunately it didn't helped — Lint, Jan 18 '20 at 06:54

Dean Van Greunen · Accepted Answer · 2020-01-18T15:01:36.280

3

Possible Duplicate of Link

Extracted from link

Have you exposed the X-Pagination from server side using access-control-expose-headers? because not all headers are allowed to be accessed from the client side, you need to expose them from the server side

Also in your frontend, you can use new HTTP module to get a full response using {observe: 'response'} like

http
  .post<any>(this.endUserReportService.URL, {observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('X-Pagination'));
  });

see: Documentation

Update 3:

The issue is on your server side code.

res.header('pagination', 'informationAboutPagination');
    let pagination = 'blablabla'
    res.header('Access-Control-Expose-Headers', pagination);

it should be this

let pagination = 'blablabla'
res.header('X-Pagination', pagination);

you had your headers set incorrectly on server side, and you where reading the wrong header on client side.

update your server side code and then use the existing client side code like above which i recommended before.

edited Jan 18 '20 at 15:01

answered Jan 18 '20 at 06:54

Dean Van Greunen

5,060
2
14
28

code updated. it was supposed to be `http.post` i accidently left it as `http.get` – Dean Van Greunen Jan 18 '20 at 13:05
also see documentation link – Dean Van Greunen Jan 18 '20 at 13:06
Unfortunately this is not working, I posted a new question with screenshots can you please go through it. I shall be thankful to you in this regard https://stackoverflow.com/questions/59800737/unable-to-access-response-header-in-angular-application?noredirect=1#comment105742320_59800737 – Lint Jan 18 '20 at 13:11
that is due to line `resp.headers.get('X-Pagination')` – Dean Van Greunen Jan 18 '20 at 15:03
`X-Pagination` is not the same as `paginaton`, simple mistake, good luck king. – Dean Van Greunen Jan 18 '20 at 15:03

Tom Shaw · Answer 2 · 2020-01-18T07:04:51.993

1

  this.http.get<any>(this.endUserReportService.URL, {
      headers: new HttpHeaders().set('X-Pagination', {}),
      observe: 'response'
  }).map(res => {
      console.log(res.headers.get('X-Pagination'));
  });

edited Jan 18 '20 at 07:04

answered Jan 18 '20 at 06:54

Tom Shaw

1,642
2
16
25

the API sends the data only if I call it with `return this.http.post(this.URL, this.headers);` I tried with `return this.http.post(this.URL, {headers:this.headers,observe:'response'})` but it was not working – Lint Jan 18 '20 at 07:01
In your getDailyReport() method add the key/value observe: 'response' – Tom Shaw Jan 18 '20 at 07:31
I tried that way too, but still getting the `null` value – Lint Jan 18 '20 at 13:15

Read response headers in component file Angular

2 Answers2