I want to write some number into <input>
and dynamically display it as a decimal inside {{}}
through pipe. It throws exception instead. Here's my code:
app.template.html:
<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [(ngModel)]="amount"/>
app.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
private amount:number;
}
Plunker: http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu?p=preview
Write any number into the input and see exception being thrown in the console.
Edit:
Working code as per rinukkusu suggestion:
app.template.html:
<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [ngModel]="amount" (ngModelChange)="onChange($event)"/>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
private amount:number;
onChange($event) {
this.amount = +$event;
}
}
This +
next to $event
is very important and what makes conversion from string to number possible!