I have an input type field which is used for entering numbers in Angular 2+. I want to add localization support for this field. Meaning --> depending on the browser's locale(language setting), I would like the input field to display number in that specific language format. Lets say I have a number with value 200000.65 This in italian locale (language - 'it'), should be displayed as 200.000,65 and in the US locale (en-US), it should be displayed as 200,000.65. Note this is an input field so the user can edit the values too.
I tried using the default DecimalPipe available in Angular 2 but I am not sure how to apply this to an input field with localization support.
Attached plunkr which has the basic setup: https://plnkr.co/edit/jIg87FmLKa0VDGkoR87k?p=preview
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
import {CommonModule} from '@angular/common'
@Component({
selector: 'my-app',
template: `
<div>
<input [ngModel]="num | number:'1.2-4'"
(ngModelChange)="num=$event" name="inputField" type="text" />
</div>
`,
})
export class App {
num = '200000.65456';
constructor() {
}
}
@NgModule({
imports: [ BrowserModule, FormsModule, CommonModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
UPDATE:
I am using github.com/robisim74/angular-l10n for this. Here is live example for this. robisim74.github.io/angular-l10n-sample/#/validation