Example 1: Using convertToHttpParams
The convertToHttpParams function transforms a Clarity Datagrid state into a PageQuery object that can be used with HttpParams. Below is the PageQuery interface that defines the output structure:
export interface PageQuery {
/**
* The page number for pagination. Starts from 1.
*/
page: number;
/**
* The number of items per page in the result set.
*/
pageSize: number;
/**
* Optional: The field to sort in ascending order.
*/
sortAsc?: string;
/**
* Optional: The field to sort in descending order.
*/
sortDesc?: string;
/**
* Optional: The filter criteria in FIQL (Feed Item Query Language) format.
* Example: name==*term*;enabled==false
*/
filter?: string;
} The function converts the Clarity datagrid state (containing pagination, sorting, and filter information) into a PageQuery object. Here's an example of the transformation:
Input: Clarity Datagrid State
// Clarity Datagrid state example
{
"page": {"from": 0, "to": 9, "size": 10, "current": 1},
"sort": {"by": "date", "reverse": false},
"filters": [
{"property": "name", "value": "mike"},
{"property": "job", "value": "programming"}
]
}Output: PageQuery Object
// output data returned by convertToHttpParams
{
"page": 1,
"pageSize": 10,
"filter": "name==*mike*;job==*programming*",
"sortAsc": "date"
}Use convertToHttpParams in your component to convert datagrid state for API requests:
import {convertToHttpParams} from 'clr-lift';
import {Component} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {ClrDatagridStateInterface} from '@clr/angular';
@Component({})
export class DatagridExampleComponent {
private http = inject(HttpClient);
refresh(state: ClrDatagridStateInterface) {
const params = convertToHttpParams(state);
const httpParams = new HttpParams({fromObject: params as Record<string, string>});
return this.http.get('/api/users', {params: httpParams});
}
}