# <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 ``` 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` 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` 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 ### 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:/demo/index.html?name=George&age=30&sex=male ``` Found issues? Let me know