Two-Way Binding

Some attribute bindings are observable and provide two-way bindings. These bindings will update the source data if changes are made in the HTML element to which the data is bound.

The following example uses the observable wr-value binding.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
    }
  }
  static get template() {
    return '<input wr-value="message">';
  }
      
}a

Any changes to sourceProperty in my-component's input element will immediately be reflected in the my-page component.

class MyPage extends wire.ui.WebComponent {

  sourceProperty = "Hello web components"; 

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}
customElements.define('my-page', MyPage);

<!-- Output -->
<input value="Hello web components">

There are other observable attribute bindings are available to use. For a list and examples of each or to learn how to create your own bindings, visit the Tinybind bindings page.