How to use two-way databinding with vaadin-grid-filter for vaadin-grid?

[YodaNinja]

How to use two-way databinding with vaadin-grid-filter for vaadin-grid?

[hotforfeature]

You're using Angular-style bindings inside of a Polymer template. The bindings are set up once on the template elements, but are lost when vaadin-grid clones the template to instantiate it. You can read more about this problem in the polymer template docs.

TL;DR; add ngNonBindable to all Polymer <template> elements to ensure no Angular bindings slip through (and to remind you). All child elements of a <template> must use Polymer syntax binding.

@Component({
  selector: 'my-component',
  template: `
    <vaadin-grid-column resizable width="9em"> 
      <template class="header" ngNonBindable [polymer]="this"> 
        <vaadin-grid-sorter path="firstName"> 
          <vaadin-grid-filter path="firstName" value="[[input]]">
            <div style="display: inline-flex; align-items: center;"> 
              <paper-input no-label-float label="First Name" on-value-changed="onInputChanged"></paper-input>
              <iron-icon icon="icons:arrow-upward"></iron-icon> 
            </div> 
          </vaadin-grid-filter> 
        </vaadin-grid-sorter> 
      </template> 
      <template ngNonBindable>[[item.firstName]]</template> 
    </vaadin-grid-column>
  `
})
export class MyComponent {
  input: string;

  onInputChanged(event: CustomEvent) {
    this.input = event.detail.value;
  }
}

The key things to note:

• [ngNonBindable] on the templates will let you use Polymer's two-way binding syntax {{ }}, which would normally be replaced with Angular's binding syntax. In this situation you don't use it, so while it's not needed, it's a good habit to get into.
• [value]="input" is changed to value="[[input]]"
• (value-changed) is changed to Polymer's event binding, on-value-changed, which takes a function name
• The directive <template [polymer]="this"> is added to the template to set the template's host. This is what allows Polymer to find the input property and onInputChanged events, which are not normally part of the vaadin-grid item model.

[YodaNinja]

Thank you! This helped.
However, I'm now getting an error for the <template [polymer]="this"> :

Can't bind to 'polymer' since it isn't a known property of 'template'. (" <vaadin-grid-column resizable width="9em"> <template class="header" ngNonBindable [ERROR ->][polymer]="this"> <vaadin-grid-sorter path="firstName">

Any idea what may be causing this?

[hotforfeature]

Sounds like Origami's PolymerModule is not provided for that component. In your top-most root app NgModule are you importing it?

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    PolymerModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

[YodaNinja]

I added that, but it still produces the same error.
I then added it to my submodule, and the error is now resolved!
Thank you!

Now, I'm trying to figure out how to share the root PolymerModule.forRoot() instead of importing in all the submodules...

[hotforfeature]

Are you lazy-loading your submodule or something? If your submodule is imported directly into your main module you don't need to add it to submodules.

If you're lazy loading via the Angular router, I'd suggest creating a SharedModule that imports and exports common dependencies such as Origami. This isn't a problem unique to Origami, that's for every Angular library and dependency, including things like FormsModule.

Finally, you should not import PolymerModule.forRoot() in child modules. Just import PolymerModule without the .forRoot() invocation. That should only be for the top-most module.

[YodaNinja]

Yes!
Just found the comment: // Do not call .forRoot() when importing in child modules.

So, in my top-most root app NgModule I have:
PolymerModule.forRoot()
And in each of the submodules, I've added just:
PolymerModule

This is working perfectly...
I'll look at your suggestion for making a SharedModule as well for common imports.

Many thanks!

[hotforfeature]

No problem, glad to have helped :)