<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

`





pattern="/path/to/page/:data/:to/:parse"
data="{{params}}"
>
Value in data is {{params.data}}

Value in to is {{params.to}}

Value in parse is {{params.parse}}



`

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
pattern="/path/to/page/:data/:to/:parse"
data="{{params}}"
>
Value in data is {{params.data}}

Value in to is {{params.to}}

Value in parse is {{params.parse}}

;
}
}
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
pattern="?"
data="{{params}}"
>
Value in data is {{params.data}}

Value in to is {{params.to}}

Value in parse is {{params.parse}}

;
}
}
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

$3

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

$3

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

``

Found issues? Let me know