Sharing Top Content from the Angular-sphere.

Advanced pagination with @ngrx/store and Angular 5+

Advanced pagination with @ngrx/store and Angular 5+  #angular2

  • Topics where you might not think about: what if the user changes the url and go to a page less then 1 or the user enter a page bigger than the maximum page, what if there are a big amount of pages should I show every page number, if I…
  • This sounds good, but how we will implement this?Start with the basicsCreate the routes for paginationOur default path is redirected to the first page.Create the pagination componentOne of the first things we need for the pagination is our page component itself.
  • If the first or last page is active the 2 numbers before or after will be shown.If another page is selected the 2 surrounding numbers will be shown.The complete pagination component:We can do a simple test with our pagination component.What will result in this:Different possibilities of paginationCreate the statemanagement for…
  • In this article I will not cover how we use state-management some basic knowledge is required for this.For our pagination logic each container has is own page state and a data state.
  • My dumb components are always just component.So the search component is my smart component, the search-list and pagination component are both dumb components.The search container is responsible for the change of pages.

Pagination is a complex topic if you start thinking and discussing about it. Topics where you might not think about: what if the user changes the url and go to a page less then 1 or the user enter a…

Advanced pagination with @ngrx/store and Angular 5+Pagination is a complex topic if you start thinking and discussing about it. Topics where you might not think about: what if the user changes the url and go to a page less then 1 or the user enter a page bigger than the maximum page, what if there are a big amount of pages should I show every page number, if I come back from another page you don’t want to reload the data, the user needs to see what he saw previously, …After asking ourself al these questions we conclude that using state management can help us with these problems. A solution in angular is to use @ngrx/store. This sounds good, but how we will implement this?Start with the basicsCreate the routes for paginationOur default path is redirected to the first page.Create the pagination componentOne of the first things we need for the pagination is our page component itself. It will have a Page object input, this will contain the current page parameter and total size of the pages. For this we will always start with the logic that 1 is the first page. A target is also provided, because our routing is based on an url.This is the logic to limit the size of pagination. There is a limit of max 7 page numbers to be shown. Always the first and last number will be shown. If the first or last page is active the 2 numbers before or after will be shown.If…

Advanced pagination with @ngrx/store and Angular 5+

Comments are closed, but trackbacks and pingbacks are open.