Using number pipe throws InvalidPipeArgumentException (Invalid argument '1' for pipe 'DecimalPipe')
Looking at the source code of Angular 2 I found this:
if (!isNumber(value)) { throw new InvalidPipeArgumentException(pipe, value);}which means, you actually need to pass a variable of type number. Using the input and binding to ngModel like you did there, your amount variable will always be of type string.
Remember: type hints are only visible in TypeScript. After transpiling to JavaScript you lose that information
I'd suggest implementing a new pipe which converts your variable to a number on the fly:
@Pipe({ name: 'toNumber'})export class ToNumberPipe implements PipeTransform { transform(value: string):any { let retNumber = Number(value); return isNaN(retNumber) ? 0 : retNumber; }}You can use it like this:
<h1>amount = {{amount | toNumber | number:'1.2-2'}}</h1><input [(ngModel)]="amount" />
Following rinukkusu's solution above -- I was able to do it without creating a custompipe. I just used <input [(ngModel)]="Number(amount)|number:'1.2-2'"/> and it worked for me.