The dgState operator is an RxJS operator designed to manage Clarity Datagrid state transformations with intelligent debouncing and duplicate filtering. It assesses changes in datagrid filters and handles API trigger events efficiently. When filters are modified, the operator introduces a 500ms debounce before initiating the API call, preventing excessive requests during rapid typing. For actions such as sorting or pagination, the API call is made promptly without delay. The operator also provides an optional parameter to control the use of distinctUntilChanged. When enabled (default: true), it ensures that no API call is initiated if the datagrid state remains the same, preventing redundant requests.
Examples
Example 1: Basic Usage
Use dgState in your observable pipeline to manage datagrid state changes efficiently:
import {convertToHttpParams, dgState} from'clr-lift';
import {Component, inject} from'@angular/core';
import {BehaviorSubject, combineLatest} from'rxjs';
import {distinctUntilChanged, filter, map, share, switchMap} from'rxjs/operators';
import {AsyncState, createAsyncState} from'ngx-lift';
import {ClrDatagridStateInterface} from'@clr/angular';
import {isEqual} from'ngx-lift';
@Component({})
exportclassUserDatagridComponent {
selectedItems: User[] = [];
userService = inject(UserService);
private dgBS = newBehaviorSubject<ClrDatagridStateInterface | null>(null);
// When the dgState parameter is set to false, it signals the execution of an API call even when the current state is identical to the previous state.// Conversely, emission is suppressed when dgState is true, thanks to the application of distinctUntilChanged.private dgState$ = this.dgBS.pipe(dgState(false));
usersState$ = combineLatest([this.dgState$, this.userService.refresh$]).pipe(
switchMap(([state]) => {
const params = convertToHttpParams(state); // if convertToHttpParams doesn't fit your need, use your own utils to convert statereturnthis.userService.getUsers(params).pipe(createAsyncState());
}),
share(),
);
total$ = this.usersState$.pipe(
filter((state) =>Boolean(state.data)),
distinctUntilChanged<AsyncState<PaginationResponse<User>, HttpErrorResponse>>(isEqual),
map((res) => res.data?.info?.total),
);
refresh(state: ClrDatagridStateInterface) {
this.dgBS.next(state);
}
}
Assume we have an API returning the following shape of data for a server-driven datagrid:
{
"results": [
{
"gender": "male",
"name": {
"first": "Johan",
"last": "Lemoine"
},
"email": "john@gmail.com"
}
// ... more users
],
"info": {
"pageSize": 10, // display 10 items per page"page": 2, // current page is 2"total": 100
}
}
Example 2: Template Implementation with Type Safety
(Optional) Whether to enable distinctUntilChanged filtering. Defaults to true. When true, suppresses duplicate states. When false, allows API calls even for identical states.
Returns
A RxJS pipe function that transforms an observable of ClrDatagridStateInterface | null.
Behavior
Adds a 500ms debounce when filters change (to avoid excessive API calls during rapid typing)
Makes API calls promptly for sorting or pagination actions (no debounce)
Optionally filters out duplicate consecutive states when enableDistinctUntilChanged is true
Starts with a null state to handle initial load scenarios