How to use an Angular input directive inside a component on every change

Question

I built a directive called intellark. It transforms QWERTY keys upon input into Arabic keys on the fly. It works fine. When using console.log inside the directive, every transformed letter is displayed, and the letters are transformed accordingly (type in English, transform and display in Arabic). I built it this way so that by adding the directive name intellark on any HTML input component, the input keys are transformed accordingly.

My problem is this. Unlike the behaviour in the directive's keyPress() method shown in the image below, when I added an HTML input component into the app.component.html, added it the directive intellark, 2-way binded it to inputText inside app.component.ts, the method showIt() isn't called on key input events. It did receive events upon pressing BACKSPACE however!

So, there is a disconnect somehow. How do I make the method showIt() listen to input events on the fly?

Although I could use techniques like services, EventEmitter, Subject and/or @Output to send the output to subscribing components, I am sure these are not the proper ways of going about this.

Any ideas how to register the input events with non-directive components? The image below shows all I built for this.

Answer 1

can you do like as below for you input box

 <input #box (keyup)="onKey(box.value)">

because by exposing $event at typscipt file .ts file you are exposing template at backend code .ts file which is bad practice , and make use of keyup , pass value of input box to you code onKey event.