How to bind data in Polymer 1.0


6 years ago

Polymer offers many advantages in modern web application development; today we will learn how easy it is to link data directly from the front-end.

In short, to display data directly into the DOM, you only need to put the variable name in square brackets, for example {{name}} — but there’s a lot more you can do, so let’s dig deeper on this.

Besides basic data-binding in Polymer, what follows will teach you how keep data synchronized in real time using the power of Firebase; if you haven’t, I recommend you also read our previous post, Getting Started with Polymer 1.0, which explains Polymer Starter Kit’s basic handling.

First steps to bind data

Let’s start by installing additional components in our local copy using bower.


< paper-input >
bower install --save PolymerElements/paper-input
< firebase-collection >
bower install --save GoogleWebComponents/firebase-element

Now that they are installed, we put the routes to the main files in the Polymer Elements list of our application, which will import everything necessary using HTML Imports; do not worry about compatibility, Polymer is responsible for implementing the necessary polyfills so you can use them without problems.


<link rel="import" href="../bower_components/paper-input/paper-input.html">

<link rel="import" href="../bower_components/firebase-element/firebase-document.html">

To allow the user to enter data, we use the < paper-input-container > component, which creates a text entry for the user including animations and design in Google’s Material Design.

Within < paper-input-container > we’ll place a < label > to declare the text we want to show the user, and an < input > tag for data entry, to which we must add the following:

  • the parameter is = "iron-input" that activates the functions for text boxes in Polymer;

  • the parameter bind-value = " {{nombre}}" which indicates the name of the variable that we will associate with the text input.


   <label>¿Como te llamas?</label>
   <input is="iron-input" bind-value="{{nombre}}" autofocus="">
   <label>¿Cual es tu apellido?</label>
   <input is="iron-input" bind-value="{{apellido}}">
¡ Hola {{nombre}}{{apellido}} !

Synchronizing data in real time with Firebase

The firebase-element includes everything needed to integrate Firebase in Polymer and makes it very easy for us to keep all user data synchronized. For our example, we will use the component ***< firebase-document >***, which allows us to maintain a real-time synchronized JSON object for all users connected to the application.

Setup is as simple as declaring the route to the object on Firebase with the location property and assigning a local variable with data property.

<firebase-document location="https://TU-APP.firebaseio.com/globalMessage" data="{{globalMessage}}">

Now we can use the JSON object stored in the variable directly into other parts of our application: the changes are updated in real time automatically, so you can quickly experiment.

To get you started easily, this example is associated with a free demo of Firebase offering limited tests for 50 users (just for testing, all data is deleted regularly). With a paid account, this can then scale to virtually any number of connections and they also offer free trial instances so you only start paying when you need to, by the way, you can register for free and without a credit card.

   <label>Mensaje en tiempo real</label> +
   <input is="iron-input" bind-value="{{globalMessage.content}}">


Feel free to fork today’s demo on GitHub and drop us a line if you have comments or suggestions. To learn more about Polymer and other great tools, do not miss our posts and tutorials on Platzi/blog and make sure to follow our classes.

Escribe tu comentario
+ 2