Week 9 | Property Types

polymer 1.0
Tue Oct 25 2016

In Polymer there are 6 different types. A Boolean, Date, Number, String, Array or Object.You can easily declare a property by adding the type only if you don’t want to set any other option.

Let me add a Date Example type. I’ll name it alertUpdateTime, as a type Date, and as a value I’ll wrap this around a function(){} and return the current dateTime.

When working with objects sometimes it is wise as a value to return the date object or any other object as a function result. This way you will be sure that the instance is always unique.

 

<!DOCTYPE html>

<html>
  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
  </head>
  <body>
    
  <alert-element></alert-element>
  <dom-module id="alert-element">
    <template>[[alertUpdateTime]]</template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function () {
      Polymer({
          is: "alert-element",
          properties:{
            message: String,
            alertUpdateTime:{
              type: Date,
              value: function(){
                return new Date();
              }
            }
          }
      });
    });
  </script>
  </body>
</html>

 

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!