@elifent/url-params NPM

<url-params>

url-params is a polymer element which is the best way to read params directly from url. If you employ app-route or app-location these are two way binded elements and soon as value changes it gets mutated to url, which effects in the desired performance of web app.

url-params is specifically build for multi page app approach, because in single page app everything is passed to inner page via parent routes.

Usage

Installation

npm install @elifent/url-params

In an html file

<html>
  <head>
    <script type="module">
      import '@elifent/url-params/url-params.js';
    </script>
  </head>
  <body>
    <url-params
        pattern="/path/to/page/:data/:to/:parse"
        data="{{params}}"
    ></url-params>
    Value in data is {{params.data}} <br>
    Value in to is {{params.to}} <br>
    Value in parse is {{params.parse}} <br>
  </body>
</html>

In polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@elifent/url-params/url-params.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <url-params
        pattern="/path/to/page/:data/:to/:parse"
        data="{{params}}"
    ></url-params>
    Value in data is {{params.data}} <br>
    Value in to is {{params.to}} <br>
    Value in parse is {{params.parse}} <br>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Other methods

Alternatively you can read all params from a GET request. To do it use pattern as ?

import {PolymerElement, html} from '@polymer/polymer';
import '@elifent/url-params/url-params.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <url-params
        pattern="?"
        data="{{params}}"
    ></url-params>
    Value in data is {{params.data}} <br>
    Value in to is {{params.to}} <br>
    Value in parse is {{params.parse}} <br>
    `;
  }
}
customElements.define('sample-element', SampleElement);

In this case if your url is path/to/page?data=a&to=b&parse=c then you will be able to get params.data as a.

Contributing

Running demo locally

Installation

  git clone https://github.com/elifent/url-params
  cd url-params
  npm install
  npm install -g polymer-cli

Running the demo locally

  polymer serve --npm
  open http://127.0.0.1:<port>/demo/index.html?name=George&age=30&sex=male

Found issues? Let me know

polymer.js

@polymer/polymer

@everything-registry/sub-chunk-286

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago