Polymer 2 Decorators
Decorators can be used to describe element properties, observers, etc.
@customElement(tagName)
Sets the tag name of the custom element. The decorator is applied to the class
. Tag names must include a -
as per WebComponents specs.
Example of a <my-element>
:
@customElement('my-element')class MyElement extends Polymer.Element { }
@property(propertyConfig)
Creates a Polymer property. It can be applied to a static class properties only.
The parameter propertyConfig
is a map object that sets the options for the property:
{ type?: enum; // Boolean, Date, Number, String, Array or Object reflectToAttribute?: boolean; // should the property reflect to attribute readonly?: boolean; // marks property as read-only notify?: boolean; // if set to true, will trigger "propname-changed" computed?: string; // computed function name (as string)}
Examples:
@propertystatic foo;
// type: is specified for property deserialization.// Used when it is passed to another elements in html attribute@property({type: Number})static initialValue = 42;
@property({readonly: true, computed: '_computeValue(foo, initialValue)'})static computedReadOnlyValue = 0; _computeValue(foo, initialValue) { return foo.toString() + initialValue;}
@computed(propList, computedFn)
Makes a property computed. It can be applied to a static class properties only.
@propertystatic one = 'one'; @propertystatic two = 'two'; @property@computed('one, two', (one, two) => one + two)static three;
@observe(propList)
Sets an observer function for a single property or a list of properties.
If observing a single property, the function should be of the type function(newValue, oldValue)
.
If observing multiple properties (comma separated), the function receives only the new values, in the same order of the list.
// single property observer@observe('name')nameChanged(newName, oldName) { // ...}
// multiple property observer@observe('firstname, lastname')fullnameChanged(newFirstName, newLastName) { // ...}
@observeOnValue(prop)
Same as @observe decorator, but the function is called when the newValue is not null or undefined.
Only single property can be observed.
@observeSinceValue(prop)
Same as @observe decorator, but the function is called on the next change, since property was initialized with any value (oldValue !== undefined).
Only single property can be observed.
@eventListener(eventType, options)
Sets an event listener for the element and binds it to a function. Options — addEventListener options.
@eventListener('click')onClick(e) { e.stopPropagation();}
@statePath(statePath)
Use with polymer-redux
Assigns a Polymer property to reflect the Redux app state.
@property @statePath('objects.total') static totalItems;
@routerStateParameter(stateParameter, options)
Use with polymer-2-ui-router
Assigns a Polymer property to reflect current ui-router state parameter.
The parameter options
is a map object that sets the options for the property:
{ reflectToState?: boolean; // should the property be reflected back to state on change}
@property @routerStateParameter('page') static currentPage;