Take a look at this particular component
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h3>Input with two decimals</h3>
<input type="text"
[value]="formattedN"
(change)="nChanged($event.target.value)"/>
</div>
`,
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);
}
}
The input is supposed to be a number with always 2 decimal places. However, this functionality does not work as expected. Try removing the last zero and notice that the field does not change to 0.00 as desired. The issue lies in the fact that the formattedN value is not updated, leading to the property binding not being updated, causing the input value to remain unchanged.
To see the example in action, check out the plunker demo here: http://plnkr.co/edit/Vyi4RKladslrdZslZQhm
If you have any suggestions or solutions to fix this problem, please share your insights.