Change value displayed in input field based on binded variable with NgModel

Question

Basically I have an input tag in my template :

<input (click)="clickableButton(pricerule.id)" type="number" nbInput status="info" shape="rectangle" [(ngModel)]="pricerule.price" placeholder="Price">

pricerule.price is a number, it's a price in centimes (french cents), not in euros (french dollars). For example, if pricerule.price is equal to 3000 , it means 30 dollars.

[(ngModel)]="pricerule.price" this part make the bind between the price and the input field. So when the page is loaded, the input field has a default value of pricerule.price ( 3000 for example ).

But I don't want 3000 to be displayed in my input field, my objective is 30 to be displayed, but I have no idea how to do that since I am new about Typescript code.

Answer 1

You can't bind one property using ngModel and then display another. I would bind the value you want (30) and then converted when you need to do something with it. Or the other way around, convert it first, then bind it.