title: Angular2 - Set A Different Color to an element Depending On Value
body: <p>I am new to <code>Angular2</code> and was wondering how I go about setting a font color to an element depending on the value.</p>
  
  <p>My scenario is: if the value of the input field is not 100 then I want it red but if it is 100 then I want it green.</p>
  
  <p>I have the following code in place but cant get it working.</p>
  
  <p><strong>XXX.component.css</strong></p>
  
  <pre><code>.red {
      color: red; 
  }
  
  .green {
      color: green;
  }
  </code></pre>
  
  <p><strong>XXX.component.css</strong></p>
  
  <pre><code>&lt;input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion "&gt;
  &lt;p&gt;hello &lt;span ng-class='{red : proportion!= '100', green: proportion === '100'}'&gt;{{proportion}}&lt;/span&gt;&lt;/p&gt;
  </code></pre>