title: Binding value to style
body: <p>I'm trying to bind a color property from my class (acquired by attribute binding) to set the <code>background-color</code> of my <code>div</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, Template} from 'angular2/angular2';
  
  @Component({
    selector: 'circle',
    bind:{
      "color":"color"
    }
  })
  @Template({
    url: System.baseURL + "/components/circle/template.html",
  })
  export class Circle {
      constructor(){
  
      }
  
      changeBackground():string{
          return "background-color:" + this.color + ";";
      }
  }
  </code></pre>
  
  <p><strong>My template:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
      .circle{
          width:50px;
          height: 50px;
          background-color: lightgreen;
          border-radius: 25px;
      }
  &lt;/style&gt;
  &lt;div class="circle" [style]="changeBackground()"&gt;
      &lt;content&gt;&lt;/content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The usage of this component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;circle color="teal"&gt;&lt;/circle&gt;
  </code></pre>
  
  <p>My binding is not working, but doesn't throw any exceptions either.</p>
  
  <p>If I would put <code>{{changeBackground()}}</code> somewhere in the template, that does return the correct string.</p>
  
  <p>So why is the style binding not working?</p>
  
  <p>Also, how would I watch the changes to the color property inside the <code>Circle</code> class? What is the replacement for</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.$watch("color", function(a,b,){});
  </code></pre>
  
  <p>in Angular 2?</p>