Currently, I am encountering an issue with angular pipe functionality. I am in the process of developing an application that utilizes reactive forms to calculate and display costs. A peculiar situation arises: when the calculation is performed for the first time, the currency pipe displays the result correctly. However, upon recalculating and obtaining the same cost, the currency pipe fails to display, showing only the numerical value instead. This issue seems to be resolved when the cost changes with each new calculation.
<input type="text" [value]="AccountingForm.get('Cost').value |currency:'USD'"
formControlName="Cost" class="form-control">
To illustrate, after the initial calculation, $100.00 is displayed. Subsequent calculations producing the same cost will show '100' without the currency symbol.
In the calculate method, I set it up like this:
this.AccountingForm.controls['Cost'].setValue(value);