Force update of a property binding in angular 2
<p>Consider the following component</p>

<pre><code>import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h3&gt;Input with two decimals&lt;/h3&gt;
      &lt;input type="text" 
             [value]="formattedN" 
             (change)="nChanged($event.target.value)"/&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {

  private n: number = 0;
  private formattedN: string = "0.00"

  public nChanged(value) {
    this.n = parseFloat(value);
    this.formattedN = this.n.toFixed(2);
  }

}
</code></pre>

<p>The input should always be a number with two decimals. That is however not always the case. Try removing the last zero, the field is not changed to 0.00 which is what I want. I understand it doesn't work because the formattedN value is not updated, which means that the property binding is not updated, hence the value of the input is not updated.</p>

<p>Run the example in plunker: <a href="http://plnkr.co/edit/Vyi4RKladslrdZslZQhm" rel="nofollow">http://plnkr.co/edit/Vyi4RKladslrdZslZQhm</a></p>

<p>Does anyone have a nice solution for this problem?</p>