polymer 2.0 two way binding

Question

I am experimenting with Polymer 2.0 and have a simple class. It has an input text box that does not respond when changing its content. What is needed to reflect changes to text box to reflect as two way binding?

The code for the class follows.

<!-- Styles MUST be inside template -->
<style>
</style>

<div>
  <input type="text" id="greeting" name="greeting" value="{{greeting}}"/>
  <slot></slot>
  {{greeting}}
</div>

// Extend Polymer.Element base class
class Polymer2Class extends Polymer.Element {
  static get is() { return 'polymer-2-class' }
  static get config() {
    return {
      properties: {
        greeting: {
          type: String,
          value: "Hello",
          notify: true
          //observer: 'greetingChanged'
        }
      },
      observers: [
        'greetingChanged(greeting)'
       ]
    }
  }
  constructor() {
    super();
    console.log('created');
  }
  connectedCallback() {
    super.connectedCallback();
    console.log('attached');
  }
  ready() {
    this.addEventListener('click', (e)=>this.handleClick(e));
    this._ensureAttribute('tabIndex', 0);
    super.ready();
    console.log('ready');
  }
  greetingChanged(greeting) {
    if(greeting === undefined) {
      console.log("greetingChanged: undefined");
    } else {
      console.log("greetingChanged: " + greeting);
    }
  }
  handleClick(e) {
    console.log("hamdleClick: " + e.type);
  }

// Register custom element definition using standard platform API
customElements.define(Polymer2Class.is, Polymer2Class);

Answer 1

I assume you're expecting greeting to appear below the <input> exactly as you type it. You'll need to use two-way native binding on the <input>'s input event:

<input type="text" value="{{greeting::input}}">

codepen