0

In angular 4 how can use a thousand separators for numbers when filling the input at the same time? (Not binding the numbers like this {{price | number}}) A specific solution for angular 4 or maybe by javascript. To clarify better, the inputs that I need to have this feature just get numbers with a lot of zero like this: 1,000,000,000. Not conversion, not percentage, not decimal like this: 1,000,000,000.00. My goal is to have this separator to read much easier, for example, something like this: 1,000,000,000 is much better than 1000000000. Thank you

Abhishek Ekaanth
  • 2,511
  • 2
  • 19
  • 40
Amir Gh
  • 265
  • 1
  • 5
  • 20

1 Answers1

0

as you mentioned,Pipe such as currency/number will not work in this case because we are dealing with input form.You can however:

A:create your own custom input component which will do the comma separation(hard way but reusable)

B:create your own custom pipe which does the comma seperation work, while you cant apply this pipe to the input html component; you can however use the (blur) and (focus) action of the input with @HostListner to apply your pipe(via transform) to the value of the <input> form.

something like:

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.currencyPipe.transform(value);
  }
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Asura
  • 859
  • 5
  • 15
  • for example if: [(ngModel)]="house.price", and price is a property of house object, how can I use onBlur() with that? – Amir Gh Jan 20 '18 at 10:40
  • OnBlur() is used for html input form.If you are just using an object property then you can just create your own @Pipe component and then use {{house.price | custompipe}}.your question wasnt clear if you were talking about regular format like this or using an html input form which my anwer is based on. – Asura Jan 20 '18 at 19:52