Angular: Add Query Parameters without Router

Sometimes it is necessary to add query parameters to a REST API url without going through the Angular router logic, such as when doing paginated lists on large tables.

To make this easy to do, just use the HttpParams module.

Import it with:

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

And, add the query parameters block to your http client call, like this:

return this.http.get('/api/v1/products', 
{
            params: new HttpParams()
            .set('pageNumber', pageNumber.toString())
            .set('pageSize', pageSize.toString())
            }).pipe(products =>  console.log(products));
}

NOTE: Lines 2 through 6 (stopping after the curly) are the query parameter block.

Here’s a source reference:

https://fireflysemantics.medium.com/passing-url-parameters-with-the-angular-http-client-821d1a097f96