title: nativeElement.Value changes in directive not being reflected for input/ngModelChange events at the moment
body: <p>Trying to replace a special character of input, I ended up writing this simple directive:</p>
  <p><strong>normalized-input.directive.ts</strong></p>
  <pre><code>@Directive({
    selector: &quot;[appNormalizedInput]&quot;
  })
  export class NormalizedInputDirective {
    constructor(private element: ElementRef) {}
  
    @HostListener(&quot;keypress&quot;, [&quot;$event&quot;]) replaceAWithB(event): void {
      const initalValue: string = this.element.nativeElement.value;
      this.element.nativeElement.value = initalValue.replace(&quot;a&quot;, &quot;b&quot;);
    }
  }
  </code></pre>
  <p>This replaces <code>a</code> with <code>b</code> on keypress. Here is my sample (<a href="https://stackblitz.com/edit/angular-ivy-lm6sp4?devtoolsheight=33&amp;file=src/app/app.component.ts" rel="nofollow noreferrer">StackBlitz</a>):</p>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;input type=&quot;text&quot; (input)=&quot;onInput($event)&quot; [(ngModel)]=&quot;model&quot; (ngModelChange)=&quot;onModelChange()&quot; appNormalizedInput/&gt;
  &lt;br/&gt;
  &lt;label&gt;{{model}}&lt;/label&gt;
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>export class AppComponent {
    model = &quot;&quot;;
  
    onInput(event) {
      console.log(&quot;on input: &quot;, event.target.value);
    }
  
    onModelChange() {
      console.log(&quot;On model change: &quot;, this.model);
    }
  }
  </code></pre>
  <p>Once I enter <code>a</code>, I expect <code>b</code> in console output and also the same for <code>model</code> (label content) but I get <code>a</code> till the next key is pressed.
  The problem is that events are <code>one step behind</code> the actual UI value of input.</p>
  <p>What is the correct <em>HostListener event</em> for handling this scenario? And how should I change the value so that I can get the fresh one in <code>(input)</code> and <code>(ngModelChange)</code> events?</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-lm6sp4?devtoolsheight=33&amp;file=src/app/app.component.ts" rel="nofollow noreferrer">StackBlitz</a></p>