Angular2 keyup event update ngModel cursor position jumps to end

You need to wrap following lines in setTimeout() call. The reason is that you need to give browser time to render new value and only then change cursor position which gets reset after new value rendering. Unfortunately, this will cause a little flickering, but I wasn't able to find any other way to make it work.

setTimeout(() => {
  this.el.nativeElement.selectionStart = pos;
  this.el.nativeElement.selectionEnd = pos;
});

You can change position of a cursor without setTimout() and flickering as suggested in accepted answer with setSelectionRange() like this:

this.el.nativeElement.setSelectionRange(position, position, 'none');

Example: stackblitz


For my case, an acceptable solution without using setTimeout was to:

  1. Not update the model on keyup
  2. Update the model instead on focusout

    @HostListener('focusout') focusOut() {
      this.ngModelChange.emit(this.el.nativeElement.value);
    }