How to get http headers from backend while passing http parameters to it in ASP.NET Core and Angular?

Question

I am using Angular 15 and ASP.NET Core 5. I get the paged items from backend when the pageSize and pageIndex are passed as parameters to it.

The action method that receives pageSize and pageIndex parameters then sends the paged items as well as totalCount to frontend.

Here's that code:

[HttpGet("getPagedCommodities")]
public async Task<IActionResult> GetPagedCommodities([FromQuery] PagingParameters pagingParameters)
{
    try
    { 
        var commodities = await _repository.Commodity.GetAllCommoditiesAsync();
        var totalCount = commodities.Count();
                
        var pagedCommodities = await _repository.Commodity.GetPagedCommoditiesAsync(pagingParameters);
                
        Response.Headers.Add("X-Pagination", JsonConvert.SerializeObject(totalCount));                

        return Ok(pagedCommodities);
    }
    catch
    {
        return StatusCode(500, "Internal server error");
    }
}

In the frontend, this is the method that gets the paged items:

getPagedCommodities(pageSize: number, pageNumber: number): Observable<CommodityForList[]> {
    let params: HttpParams = new HttpParams();
    params = params.append('pageSize', pageSize);
    params = params.append('pageNumber', pageNumber);
    
    let httpOptions = {
      params: params
    };
    return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/', httpOptions);
      
  }

How can I read the totalCount http header parameter sent from server?

Thank you for your help.

Answer 1

How to access the header parameters of an API-response

I now integrated your code into my own Angular/ .NET project and eventually figured out a code that works:

Backend: Startup.cs

I had to add X-Pagination to the CORS policy, otherwise it would always be undefined. Click here to read why this is needed.

services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("X-Pagination"); // I had to add this line
    });
});

Backend: Controller-Method

I had to change the input parameters from PagingParameters pagingParameters to [FromQuery] int pageSize, [FromQuery] int pageNumber:

[HttpGet("getPagedCommodities")]
public async Task<IActionResult> GetPagedCommodities([FromQuery] int pageSize, [FromQuery] int pageNumber)
{
    try
    { 
        var commodities = await _repository.Commodity.GetAllCommoditiesAsync();
        var totalCount = commodities.Count();
                
        var pagedCommodities = await _repository.Commodity.GetPagedCommoditiesAsync(pagingParameters);
                
        Response.Headers.Add("X-Pagination", JsonConvert.SerializeObject(totalCount));                

        return Ok(pagedCommodities);
    }
    catch
    {
        return StatusCode(500, "Internal server error");
    }
}

Frontend: Service-Method

By adding observe: 'response', access to HttpResponse<YourJsonObject> will be granted. You can then get your header-values via response.headers.get("Header-Key").

I also had to change the way I assemble the httpOptions (which is the second parameter of this.http.get).

getPagedCommodities(pageSize: number, pageNumber: number): Observable<{commodities: CommodityForList[]; totalCount: number}> {

    const params: HttpParams = new HttpParams()
                                .append('pageSize', pageSize)
                                .append('pageNumber', pageNumber);

    const url = `${this.baseUrl}/getPagedCommodities/`;

    return this.http.get<CommodityForList[]>(url, { observe: 'response', params })
        .pipe(
            map(response => {

            // Access 'total count' in header:
            const totalCount = response?.headers?.get('X-Pagination');
            const parsedTotalCount = +(totalCount ?? 0);

            return { commodities: response?.body ?? [],
                     totalCount: parsedTotalCount };
            })
        );
}

Eventually I was able to access the returned values as follows:

this.getPagedCommodities(0, 1).subscribe(
    res => {
        console.log('Commodities-Array:', res.commodities);
        console.log('Total count:', res.totalCount);
    }
);

Answer 2

You can pass the setting observe: 'response' to the http get to observe the whole response and not just the body.

this.http.get(myUrl, {
  observe: 'response',
  params
}).subscribe(response => console.log(response))

So now instead of getting the body, you now get the whole response where headers and body is a property of that response:

{
  headers: {
    totalCount: 123
  },
  status: 200,
  body: {}
}