How to add localization support to an input type field in Angular 2+

Viewed 749

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

0 Answers
Related