In this article, the implementation of pagination and search for large amounts of data will be discussed. The pagination and search will be optimized using the debounce technique and several RxJs operators such as debounceTime, distinctUntilChanged, switchMap, exhaustMap, and more. The fake product pagination data API from StoreRestApi will be used.
Explanation of the search feature:
The goal of the search feature is to have a search field that takes an input value. When the user inputs a value and stops inputting for 0.5 seconds, the API will be called. It is important to only call the API when the complete search term is inputted, rather than for every letter inputted. To achieve this, the debounceTime operator is used to delay the API call, and the distinctUntilChanged operator is used to prevent API calls when the input value is not changed.
To implement this, the searchControl is declared as an Angular reactive form FormControl for HTML input binding. The searchTerm$ property is declared as the valueChanges of searchControl, which returns an Observable of the search value. This Observable is then piped through 4 RxJs operators: takeUntil, debounceTime, distinctUntilChanged, and startWith.
Here are the HTML search elements:
“`
“`
Explanation of the pagination approach:
The pagination has next and previous page routes, and the page item limit can be updated. The paginationEvent$ is declared as a Subject, which serves as an emitter for API calling. When the pagination page or limit changes, the paginationEvent$ is nexted to trigger the emitter. The setPage method updates the page number and emits a signal when a user requests a new page. The setItemLen method updates the page limit.
Here are the HTML pagination elements:
“`
Current Page: {{queryParams.page}}
“`
To provide a proper example, a new project is created and the product module, product service, and productList component are generated. The HttpClientModule and ReactiveFormsModule are added to the product module.
The product.service.ts file is implemented to use the StoreRestApi products API. The QueryParam type is defined for safety, and the getProducts method is defined to return an Observable of the products response. The method takes a partial queryParam.
The product.component.ts file is implemented with queryParams, searchTerm$, and paginationEvent$ properties. These properties are used to merge into a single subscription and call the product API. The searchTerm$ is kept at the upper level to trigger from the beginning whenever there is a search input change. The paginationEvent$ is switchMap to the productList API. The exhaustMap operator is used inside the paginationEvent$ to ensure that one request is completed before the next one is triggered.
The product.component.html file is implemented with the necessary HTML elements for displaying the search field, products, and pagination.
Overall, this implementation allows for efficient pagination and search functionality for handling large amounts of data.
Source link
