How to set focus/cursor at the end of the content or at the last position where cursor was? about ngx-wig

[bampakoa]

@mayur9293 try to set the caret at the end with the following snippet:

const el = this.editor.ngxWigEditable.nativeElement;
      setTimeout(() => {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      });

[mayur9293]

I tried using @HostListener over the ngx-wig to get the selectionStart or the cursor's position. Which works absolutely fine on TextArea. But it returns undefined for ngx-wig.

The sample code looks something like this

@Directive({
     selector: '[TagGenerator][ngModel]'
})
export class TagGeneratorDirective {
@Output() ngModelChange: EventEmitter<any> = new EventEmitter();
     constructor(private el: ElementRef, private render: Renderer) { }

@HostListener('keyup', ['$event']) onInputChange(event) {
    // get position
    let pos = this.el.nativeElement.selectionStart;
    let val = this.el.nativeElement.value;
    if (SomeLogic) {
      // Change ngModel here
      this.render.setElementProperty(this.el.nativeElement, 'value', val);
      this.ngModelChange.emit(val);
      // set the cursor position to old place
      setTimeout(() => {
          this.el.nativeElement.selectionStart = pos;
          this.el.nativeElement.selectionEnd = pos;
    });
    }
  }

Where I am using this directive something like this
<ngx-wig [(ngModel)]="value" TagGenerator [buttons]="'bold,italic'" >loading</ngx-wig>

Am I doing something wrong? Any help would be appreciated.

[mayur9293]

@mayur9293 try to set the caret at the end with the following snippet:

const el = this.editor.ngxWigEditable.nativeElement;
      setTimeout(() => {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      });

This worked like magic.
Is there a way to set the caret in between or towards the previous position??