md-collection-pagination v1.0.3

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