CODEWITHSUNDEEP
angular
Stefan
Stefan

Reputation: 14873

Input: display different Text when input is focused / not focues

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

Example

(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 :)

Upvotes: 2

Views: 233

Answers (1)

FAISAL
FAISAL

Reputation: 34693

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.

Upvotes: 3

Related Questions