url-params
A polymer element to read data from url
<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
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/polymer#^3.0.0
- Released
- 2019-02-07
- Maturity
- IMPORTED
- License
- ISC License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
url-params - Vaadin Add-on Directory
A polymer element to read data from url
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 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 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:
View on GitHub
url-params version 3.0.2
### Dependencies
url-params version 3.0.3
### Dependencies
* @polymer/polymer#^3.0.0