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

License

This project is licensed under the terms of the MIT license.