Placing cursor at end of the text in html table cell

Question

Want to set cursor focus at end of the text for every <td>

 <table #sampleTable>
     <th>name</th>
     <th>number</th>
     <tr>
         <td #name contenteditable="true">
             jack
         </td>
         <td #number contenteditable="true">
             5487
         </td>
     </tr>
 </table>

component.ts

@ViewChild('name') colName;
 ...
 ngAfterViewInit(){
     setTimeout(() => {
         this.colName.nativeElement.focus() //setting focus at name column
     }, 1000);   
 }

but unable to set cursor at end of the text. Any one help me out in a angular way with out using Jquery.

Answer 1

Demo: https://stackblitz.com/edit/angular-svtdvv

Incorporated this answer in solution for browser compatibility: contenteditable, set caret at the end of the text (cross-browser)

  @ViewChild('name') colName;
  ngAfterViewInit() {
    this.placeCaretAtEnd(this.colName.nativeElement);
    this.colName.nativeElement.focus();

  }

  placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } 
    else if (typeof (<any>document.body).createTextRange != "undefined")      {
      var textRange = (<any>document.body).createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    }
  }