Select the text inside an input using Typescript in Angular 2

Question

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.

this has nothing to do with AngularJS, correct? If so, please remove the "angularjs" tag. — jbobbins
– jbobbins, Commented Sep 10, 2022 at 20:52

Community · Accepted Answer · 2017-05-23 12:09:47Z

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() {

  }
}

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 21, 2016 at 3:18

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aitor Martin Over a year ago

Can you please include an example or a link to an example of that inject behaviour? Im still learning Angular 2

basarat Over a year ago

Added docs and example. FWIW personally I am not following frameworks till they support TSX (basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html).

Eric Martinez Over a year ago

@basarat you may want to read this issue

jbobbins Over a year ago

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 · Accepted Answer · 2022-09-10 20:48:00Z

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

Collectives™ on Stack Overflow

Select the text inside an input using Typescript in Angular 2

2 Answers 2

Angular2

More

Example

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Angular2

More

Example

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related