Paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via PageSizeOptions.
The current page size will always appear in the dropdown, even if it is not included in the page size options.
Items per page:
Each paginator instance requires:
The current page index is by default at 0 but can be explicitly set via the page index.
When the user interacts with the Paginator, a PageEvent will be fired that can be used to update any associated data views.
Labels can be customized for Paginator by providing an instance of your MatPaginatorIntl. It will allow you to change the following:
Paginator uses role="group" to group its child controls semantically. You must add the aria-label or aria-labelledby attribute to the
You can set aria-label attributes for buttons and select controls within the Paginator in MatPaginatorIntl.
Angular eight pagination component
Pagination is implemented with the
Install the Angular 8 pagination component with the npm install JW-angular-pagination command.
Integration with your Angular Eight app
Import the JwPaginationComponent into your Angular app.module.ts and add it to the declaration array to make it available to other components within the Angular module.
From the example this is the app module (app.module.ts), the pagination component is imported on line 3 and added to the declarations on line 13.
There are two essential properties to use the Angular 8 pagination component:
Example Angular 8 components with pagination.
It is the app component (app.component.ts) from the example, and it creates a hardcoded array of items to be paged in the ngOnInit() method and updates the current page of items in the onChangePage() callback method.
Example Angular 8 Component Template with Pagination
It is the app component template (app.component.html) from the example. The pagination component is bound to the app component's item property using the Angular model binding attribute [item] = "item", and is bound to the app component's onchangePage() method using the Angular event binding attribute (changePage) = ". onChangePage($event)".
Styling the Pagination Component
The JW Angular pagination component is unstyled by default; you can use the below CSS selectors to add your custom styles.
You can also plug in Bootstrap (3.x or 4.x) which the component works well with, that's what I used in the example.
Hiding Pagination Buttons
To hide any buttons, you can set them to display: none, using the CSS selectors described above.
More Customisation of the Angular Pagination Component
If you want to do other customizations, such as changing the HTML template of the component, I would recommend just copying the pagination component code into your custom Angular component.
To use this approach you need to install the jw-paginate package from npm with the command npm install jw-paginate . This is the complete pagination component code, also available here on GitHub.