Angular 5 Pipe, {updateOn:'blur'} not updating model as expected

Question

I've created a custom pipe in Angular 5 that updates the display of an input field on blur.

The value of the input field is converted and displayed, but the value of the model is not updated properly. This is the functionality I am expecting, is there a way to achieve this with a pipe?

Stackblitz - Link to Sample Code

Steps to Reproduce the issue.

Remove the existing value and type in any number and click outside the field. (Eg: 242235.34234)

The input and the model values do not match.

HTML Code:

<h1>Currency Pipe</h1>

<div>
  Input:
  <input type="text" [ngModel]="inputValue | currency" name="inputValue"
    [ngModelOptions]="{updateOn:'blur'}" (ngModelChange)="inputValue=$event"/>
</div>

<div>{{ inputValue }}</div>

Angular Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as accounting from 'accounting';

@Pipe({
  name: 'currency'
})
export class CurrencyPipe implements PipeTransform {

  private format = { precision: 2, thousand: ',', decimal: '.' };

  transform(value: string): any {

    let formattedValue = accounting.unformat(value);
    return accounting.formatNumber(formattedValue, this.format);
  }

}

Answer 1

you're adding a pipe for the input but not the output? {{ inputValue | currency }}