using AngularJS with paper elements

[zishanj]

I have seen today on element catalog page located at https://elements.polymer-project.org/guides/using-elements#introduction

You don't need to use Polymer directly to use these elements. However, using Polymer you can take advantage of special features such as data binding.

Thus it also means we can use AngularJS with paper elements and can also use it's two-way data binding? I am asking this because the angular material library is not that good as compared to paper elements.

[sjmiles]

Whether you can use Angular's two-way data-binding with a Polymer element is a question for the Angular team. Polymer 1.0 has a well-defined event model to notify other frameworks of data-changes, but whether this is supported for data-binding is up to the host framework.

[zishanj]

Thanks for the reply. Actually I have tried AngularJS with Polymer 0.5.5 but it doesn't support 2-way data binding. Like you said now that:

Polymer 1.0 has a well-defined event model to notify other frameworks of data-changes

Then I will definitely give it a test with AngularJS now.

[zishanj]

Just tested version 1.0 of paper-input with AngularJS 1.3.15 and it only supports one-way data binding. :(

[zishanj]

I checked the source code of paper-input and came to know that it's using paper-input-container as it's base element which also using regular html input tag and label. After taking little guidance from documentation, I came across with this solution and it works perfectly with AngularJS two-way data binding:

<paper-input-container>
  <label>Test input</label>
  <input is="iron-input" ng-model="test.test_input"></input>
</paper-input-container>

This makes up my day! :)

[kevinpschaaf]

Glad you got it working! I'm going to go ahead and close this issue. Send us a tweet if you make something cool with it!

[jonnitto]

Do you have a clue how I can use this with paper-input-error? paper-input-containershould habe also an invalid, if the value has some errors... Something like paper-input(label="label" error-message="error" minlength="6" auto-validate), just with ng-model...

[zishanj]

@jonnitto I have switched to Angular own Polymer like library Material. Have a look at https://material.angularjs.org/

[nomad3k]

The example above works, except if the value is populated when the view is initially rendered.

<paper-input-container>
  <label>Username</label>
  <input is="iron-input" ng-model="username" required></input>
  <paper-input-error>Required</paper-input-error>
</paper-input-container>

The label and input are overlapping. The container has the label-is-floating style, which only disappears after some events fire. Here I've already set the username to be u.