how to achieve currency type Input in angular 5?
Here you need CurrencyPipe
transform on (blur) event.
In your app.module.ts
add CurrencyPipe
provider.
import { CommonModule, CurrencyPipe} from '@angular/common';
@NgModule({
...
providers: [CurrencyPipe]
})
export class AppModule { }
App.component.html
Bind event onblur
event to input textbox.
<h1>On Focus lost change Format amount</h1>
<input type="text"(blur)="transformAmount($event)" [(ngModel)]="formattedAmount" />
In your App.component.ts
file write method transformAmount($event)
AppComponent.ts
import { Component,ElementRef } from '@angular/core';
import { CommonModule, CurrencyPipe} from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
formattedAmount;
amount;
constructor(private currencyPipe : CurrencyPipe) {
}
transformAmount(element){
this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, '$');
element.target.value = this.formattedAmount;
}
}
See this Demo
Hope above solution will help you!