md-collection-pagination
Angular Material Design component for paginating a collection.
Demo
See it in action here.
Installation
npm install --save md-collection-pagination
Setup
The Webpack way.
import mdCollectionPagination from 'md-collection-pagination';
angular.module('app', [mdCollectionPagination]);
Using the script
tag.
<script src="node_modules/md-collection-pagination/dist/md-collection-pagination.min.js" charset="utf-8"></script>
<script>
angular.module('app', ['mdCollectionPagination']);
</script>
Example
Consider the following list of items.
<md-list>
<md-list-item ng-repeat="item in vm.items">{{ item }}</md-list-item>
</md-list>
It's likely that you don't want to render thousands of them at once. You can easily deal with this!
<md-list>
<md-list-item ng-repeat="item in vm.shownItems">{{ item }}</md-list-item>
</md-list>
<md-collection-pagination collection="vm.items" paginated-collection="vm.shownItems"></md-collection-pagination>
That's it! The vm.shownItems
variable is assigned with a small subset of the whole vm.items
array
and the user can easily go through it using the navigation.
Configuration
Attribute | Type | Description |
---|---|---|
collection |
Array |
The base collection containing all the items. |
paginated-collection |
Array |
The variable to be updated with a subset of the collection . |
per-page |
Number | String |
The maximum amount of items to be displayed at once, present in the paginated-collection . Default: 5 . |
navigation-length |
Number | String |
The maximum amount of numbers to be displayed within the navigation. Default: 5 . |
License
This project is licensed under the terms of the MIT license.