Usage

The pager bar expects the following bindings (optional bindings are noted in the object):

PagerBarBindings = {
    currentPage: '<',
    isPageInformationVisible: '<?',
    isPagerVisible: '<?',
    itemsPerPage: '<',
    numberOfItems: '<',
    maximumSlots: '<?',
    pageSelected: '&'
};

For the pager bindings, consult the component source code.

Interaction

Pager and Pager Bar instances are seemingly stateful, but in fact are presentational components. Because typical use cases for Pagers coincide with paged API results, we rely on application state (redux store) to be the source of truth for current results status rather than internal Pager state. As such, all page size, etc., calculations will be found elsewhere (most likely in reducers or selectors).

The presentational nature of Pager components means that click actions are provided to the component as callback functions from the parent controller. See current usage examples in the invision-customercare module for full context.

Pager Bar Usage

The pager bar encompasses both the pager component and additional information section. This is the most common use case.

HTML

<div class="t-content" ng-controller="pagerExampleController as controller">
    <h3>Interactive Example To Redraw Pager Bar:</h3>
    <div class="c-generalForm">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Current page:</label>
                <input
                    ng-model="controller.interactive.currentPage"
                    type="number"/>
            </div>
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Maximum slots:</label>
                <input
                    ng-model="controller.interactive.maximumSlots"
                    type="number"/>
            </div>
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Number of items available:</label>
                <input
                    ng-model="controller.interactive.numberOfItems"
                    type="number"/>
            </div>
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <label>Show Pager</label>
                <div class="c-checkbox">
                    <input type="checkbox"
                        id="isPagerVisible"
                        name="isPagerVisible"
                        ng-model="controller.interactive.isPagerVisible">
                    <label for="isPagerVisible">Visible</label>
                </div>
            </div>
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <label>Show Page Information</label>
                <div class="c-checkbox">
                    <input type="checkbox"
                        id="isRecordCountVisible"
                        name="isRecordCountVisible"
                        ng-model="controller.interactive.isRecordCountVisible">
                    <label for="isRecordCountVisible">Visible</label>
                </div>
            </div>
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <label>Show Page Size Options</label>
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="isPageSizeOptionsVisible"
                           name="isPageSizeOptionsVisible"
                           ng-model="controller.interactive.isPageSizeOptionsVisible">
                    <label for="isPageSizeOptionsVisible">Visible</label>
                </div>
            </div>
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <label>Hide Page Size Label</label>
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="hidePageSizeLabel"
                           name="hidePageSizeLabel"
                           ng-model="controller.interactive.hidePageSizeLabel">
                    <label for="hidePageSizeLabel">Visible</label>
                </div>
            </div>
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <label>Pagination Data Context: Filters</label>
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="dataContext-filter-0"
                           ng-click="controller.setSelectedFilters()"
                           ng-model="controller.paginationDataContext.filters[0].selected">
                    <label for="dataContext-filter-0" ng-bind="controller.paginationDataContext.filters[0].val"></label>
                </div>
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="dataContext-filter-1"
                           ng-click="controller.setSelectedFilters()"
                           ng-model="controller.paginationDataContext.filters[1].selected">
                    <label for="dataContext-filter-1" ng-bind="controller.paginationDataContext.filters[1].val"></label>
                </div>
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="dataContext-filter-2"
                           ng-click="controller.setSelectedFilters()"
                           ng-model="controller.paginationDataContext.filters[2].selected">
                    <label for="dataContext-filter-2" ng-bind="controller.paginationDataContext.filters[2].val"></label>
                </div>
            </div>
        </div>
    </div>
    <inv-pager-bar
        current-page="controller.interactive.currentPage"
        hide-page-size-label="controller.interactive.hidePageSizeLabel"
        is-page-information-visible="controller.interactive.isRecordCountVisible"
        is-page-size-options-visible="controller.interactive.isPageSizeOptionsVisible"
        is-pager-visible="controller.interactive.isPagerVisible"
        items-per-page="controller.interactive.itemsPerPage"
        maximum-slots="controller.interactive.maximumSlots"
        number-of-items="controller.interactive.numberOfItems"
        on-page-selected="controller.page"
        on-page-size-option-selected="controller.pageSizeOptionSelected"
        page-information-data-context="controller.interactive.paginationDataContext">
    </inv-pager-bar>
</div>

Pager Only Usage

Examples of the angular component

HTML

<div class="t-content" ng-controller="pagerExampleController as controller">
    <h3>Interactive Example To Redraw Pager:</h3>
    <div class="c-generalForm">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Current page:</label>
                <input ng-model="controller.interactive.currentPage" type="number"/>
            </div>
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Maximum slots:</label>
                <input ng-model="controller.interactive.maximumSlots" type="number"/>
            </div>
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Number of pages available:</label>
                <input ng-model="controller.interactive.numberOfPages" type="number"/>
            </div>
        </div>
    </div>
    <inv-pager
        current-page="controller.interactive.currentPage"
        number-of-pages="controller.interactive.numberOfPages"
        maximum-slots="controller.interactive.maximumSlots"
        page-selected="controller.page"
    ></inv-pager>
</div>

Various pager states

Examples of the component's state in various scenarios

HTML

<div class="t-content" ng-controller="pagerExampleController as controller">
    <div ng-repeat="example in controller.examples">
        <div class="c-definitions u-mt+ u-mb++">
            <div class="c-definition">
                <div class="c-definition-term">Current Page:</div>
                <div class="c-definition-value" ng-bind="example.currentPage"></div>
            </div>
            <div class="c-definition">
                <div class="c-definition-term">Number of Pages Available:</div>
                <div class="c-definition-value" ng-bind="example.numberOfPages"></div>
            </div>
        </div>
        <inv-pager
                current-page="example.currentPage"
                number-of-pages="example.numberOfPages"
                page-selected="controller.page"
        ></inv-pager>
        <div class="u-mv+ u-pv"></div>
    </div>
</div>