Angular display a rounded number but preserve full precision otherwise-CodePudding

I have a simple component with a readonly field containing output values taken from an ngModel

<input [(ngModel)]="myObject.response.value" readonly/>

The value returned is always in full precision for example "1.12318995165161..." But for display it is needed to be rounded to 2 decimal places "1.12".

Using PrimeNG's p-InputNumber I can round the value to 2 decimal places but the precision is lost in the process.

<p-inputNumber [(ngModel)]="myObject.response.value" [maxFractionDigits]="2" readyonly></p-inputNumber>

What I hope to achieve is even after the display is formatted to 2 decimal places, I require the values to maintain full precision when copied out through a CTRL-C operation How can I achieve this in angular? Thank you.

CodePudding user response：

You have to display the rounded number using PrimeNg, a pipe or whatsoever, and then listen to the copy event to write the content you want to the clipboard.

<p-inputNumber [(ngModel)]="myObject.response.value" [maxFractionDigits]="2" readyonly (copy)="handleCopy()"></p-inputNumber>

handleCopy() {
  navigator.clipboard.writeText(this.myObject.response.value);
}

CodePudding user response：

Since the input is readonly and you're not going to edit it, you don't have to use 2-way-binding. Also, there's no need to use PrimeNG.

Instead you can bind to the value attribute and use the decimal pipe to fix the precision like this:

<input [value]="this.myObject.response.value | number: '1.2-2'" (copy)="onCopy()" readonly />

And in your component .ts file you can handle the copying event like this:

public onCopy(): void {
   navigator.clipboard.writeText(this.myObject.response.value);
}