I was trying to create a directive in angular10 that would format the value being displayed while typing in an input type `number` (or even `text`) element.

The desired scenario is that whenever a user presses the "1" in keyboard the text box view should show (in the pipe mentioned below the 1 is transformed to १)

[![enter image description here](https://i.stack.imgur.com/mtdBN.png)](https://i.stack.imgur.com/mtdBN.png)

I have already created a pipe that takes the text and converts into the desired format. But I want the directive to change the viewed data on every keypress event but still retain the actual value as the value entered, only the text displayed to the user must be formatted.

(PS: I already have an idea regarding how to implement the pipe but if required can provide the code for it)