2

What is the easiest way to display different text inside an input depending if it is focused or not.

Example

  • Focused: 150
  • NotFocused: 150 €

(when accessing the value, I should get 150)

I found this answer HTML5 event handling(onfocus and onfocusout) using angular 2. However I think there must be already a simple example, etc but I can't find it with google :)

Stefan
  • 14,826
  • 17
  • 80
  • 143

1 Answers1

3

Assuming that you save the input value in amount model, you can do the following: 

<input  #amountInput 
        (focus)="amountInput.value = amount"  
        (focusout)="amountInput.value = currencyPipe.transform(amount,'EUR',true)" 
[(ngModel)]="amount">

You need to inject CurrencyPipe in your constructor and provide it in your component or module providers. 

import { CurrencyPipe } from '@angular/common';

@Component({
  ...
  providers: [CurrencyPipe]
})

constructor(private currencyPipe:CurrencyPipe) { }

Link to working demo.

FAISAL
  • 33,618
  • 10
  • 97
  • 105