md-collection-pagination

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.