5

I'm trying to do exactly what is described in this post, but in Angular2.

Basically use the javascript function .setSelectionRange(start, end); in an input after a user clicks on a trigger. I can't find any way to replicate this behaviour using Typescript.

Thanks in advance.

Community
  • 1
  • 1
Aitor Martin
  • 724
  • 1
  • 11
  • 26

2 Answers2

3

I can't find any way to replicate this behaviour using Typescript.

TypeScript is just JavaScript. I suspect you mean to say Angular2 (that post is Angular1).

Angular2

You need to get a hold of the dom element (which is what you seem to be struggling with). In your controller you need to inject ElementRef. E.g. @Inject(ElementRef) elementRef: ElementRef,

Once you have the element you can traverse it and do whatever dom access / manual manipulation you need to do.

More

Docs : https://angular.io/docs/js/latest/api/core/ElementRef-class.html

Example

Sample : https://stackoverflow.com/a/32709672/390330

import {Component, ElementRef} from 'angular2/core';

@Component({
  selector:'display',
  template:`
  <input #myname (input) = "updateName(myname.value)"/>
  <p> My name : {{myName}}</p>
`
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {

  }
}
Community
  • 1
  • 1
basarat
  • 261,912
  • 58
  • 460
  • 511
  • Can you please include an example or a link to an example of that inject behaviour? Im still learning Angular 2 – Aitor Martin Mar 21 '16 at 03:24
  • Added docs and example. FWIW personally I am not following frameworks till they support TSX (https://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html). – basarat Mar 21 '16 at 03:32
  • @basarat you may want to read this [issue](https://github.com/angular/angular/issues/5131) – Eric Martinez Mar 21 '16 at 03:39
  • The need clearly described in the title to "Select the text inside an input using Typescript in Angular 2" is not addressed by this answer, nor is it in the referenced example. – jbobbins Aug 18 '22 at 01:01
0

This example line of code shows the essence of selecting the text (with .name being an ElementRef reference):

this.name.nativeElement.setSelectionRange(0, 999);

Here are all the necessary pieces put together (as well as putting focus on the input) for a "name" field:

View:

<input name="name" formControlName="name" type="text" [(ngModel)]="data.name">

Component:

export class MyComponent {
  @ViewChild('name') name: ElementRef; // * see security comment below for ElementRef
  @Input() data: {name: 'Foo Baz'};
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl()
    });
  }

  // call this to give the field focus and select its text
  focusAndSelectNameFieldText(){
    if (!this.name) return;
    this.name.nativeElement.focus();
    setTimeout(() => {
      this.name.nativeElement.setSelectionRange(0, 999);
    });
  }
}

*Please be sure your use of ElementRef does not pose a security risk: https://stackoverflow.com/a/44509202/442665

jbobbins
  • 1,221
  • 3
  • 15
  • 28