My First Dart Polymer Element

Let’s get started with building the first Dart Polymer element.

The component is responsible for calculating squared value of a number.

The element’s code is of course pretty simple:


void calculate(Event e, var detail, Element target) {

   String data = (target as InputElement).value;

   value = int.parse(data);

   square = value * value;

   if(value == null){

     summary = "No text entered";



   summary = value.toString() + " squared = " + square.toString();




This function is binded throw the square element :

<polymer-element name="square-calculator" >



    Enter number: <input type="number" on-change=""  >







 <script type="application/dart" src="squareCalculater.dart"></script>



Then the component can be added to the html file:




   <meta charset="utf-8">

   <title>Sample app</title>

   <link rel="stylesheet" href="squarecalc.css">


   <!-- import the click-counter -->

   <link rel="import" href="squareelement.html">

   <script type="application/dart">export 'package:polymer/init.dart';</script>

   <script src="packages/browser/dart.js"></script>



   <h1>Calculate Square Value</h1>


   <p>Let's calc!</p>


   <div id="calc_id">

     <square-calculator ></square-calculator>






You can view the code in this link.

If you want to download the Javascript artifacts  click here.