I am writing a directive for Input field in a .
I want to show an empty string when the value is ‘*’
The values are coming from the backend and I want to bind the value.
My directive is working fine but I am also getting exception.
Code

@HostListener('change', ['$event']) onChange(): void {
    if (this.textbox === undefined) {
      return;
    }

    const formattedVal = this.textbox.value == '*' ? '' : this.textbox.value; //* is the escape character for password
    try {
      this.renderer.setProperty(this.textbox, 'value', formattedVal);
    } catch (e) {
      // Uncaught (in promise) DOMException: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.
      // silence
    }

blue, input, keydown, keyup events are not helping when I bind the values. These events are helping only when I type. But my requirement is to change the value when I bind. I don’t want to change the form value but only display value.

I truly appreciate any lead.

I tried settings up different events but not helping. Also I tried Pipe but no luck.
I want to change the display value not form value.