Get the number of pages in iron-pages

Question

I'd like to show the number of the currently selected page and number of all pages in iron-pages (e.g. "page 1 of 100").

Getting the former is easy as you can look for the selected-changed event. For the latter I have no idea how to get it. I was considering getting the number of child elements in iron-pages, but that doesn't seem to be reliable.

What you have tried can you post your code ? – Gopinath Kaliappan Dec 09 '17 at 06:47 — Gopinath Kaliappan, Dec 09 '17 at 06:47

score 2 · Accepted Answer · answered Dec 02 '17 at 21:26

What you can do is make sure every page has a corresponding number as attribute. You can get the number of pages by evaluating child elements (ignoring the fallback page).

A working example:

<!DOCTYPE html>
<html>

<head>
    <base href="//polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">

    <link rel="import" href="iron-pages/iron-pages.html">


    <dom-module id="example-component">
        <template>
            <style>
                :host {
                    display: block
                }
            </style>

            <input value="{{pageName::input}}" placeholder="Type a page name here.">

            <iron-pages id="ironPages" selected="[[pageName]]" attr-for-selected="page-number" fallback-selection="fallback">
                <div page-number="1">One</div>
                <div page-number="2">Two</div>
                <div page-number="3">Three</div>
                <div page-number="fallback">
                    Change pages by typing '1', '2', or '3' in the input above.
                </div>
            </iron-pages>

            <div id="pageNumbering">Page [[currentPage]] of [[totalPages]]</div>

        </template>

        <script>
            class ExampleComponent extends Polymer.Element {
                static get is() {
                    return 'example-component';
                }
                static get properties() {
                    return {
                        currentPage: {
                            type: Number,
                            value: 0,
                        },
                        totalPages: {
                            type: Number,
                            value: 0,
                        }
                    };
                }

                connectedCallback() {
                    super.connectedCallback();
                    // fallback doesn't count
                    this.totalPages = this.$.ironPages.children.length - 1;
                    this.addEventListener('iron-select', this._onPageChanged);
                }

                _onPageChanged() {
                    let currentPage = this.$.ironPages.selectedItem.getAttribute('page-number');

                    if (currentPage == "fallback") {
                        this.$.pageNumbering.hidden = true;
                    }

                    if (currentPage <= this.totalPages) {
                        currentPage = parseInt(currentPage);
                        this.set('currentPage', currentPage);
                        this.$.pageNumbering.hidden = false;
                    }
                }

            }

            customElements.define(ExampleComponent.is, ExampleComponent);
        </script>
    </dom-module>

</head>

<body>
    <example-component></example-component>
</body>

</html>

Get the number of pages in iron-pages

1 Answers1