Angular 2 select text on specific input

Question

With jQuery, we would select all contents of a specific input on-submit this way:

<form id="target">
  <input id="input-1" type="text" value="some value" />
<form>

$("#target").submit((event) => {
  event.preventDefault();
  $("#input-1").select();
});

How do we accomplish this with Angular 2?

Answer 1

You can easily do it in the template like this:

<input type="text" (click)="$event.target.select()" />

or add a local variable to your element and reference that instead:

<input type="text" #myInput (click)="myInput.select()" />

The benefit of the second approach is that by setting a local variable name to your element, other elements can reference that variable as well.

Answer 2

I figured out a way without using an event listener...

<form id="target">
  <input id="input-1" #input-1 type="text" value="some value" />
<form>

component.ts

@ViewChild('input-1') inputOne: ElementRef;

selectInput() {
  const inputElem = <HTMLInputElement>this.inputOne.nativeElement;
  inputElem.select();
}

Answer 3

You can create directive like below and use it where you need:

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[appSelectOnFocus]'
})

export class SelectOnFocusDirective {

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('focus', null) onFocus() {
    this.elementRef.nativeElement.select();
  }
}

Answer 4

A better idea for focus events is to use the focus event rather than the click event.

<input type="text" (focus)="$event.target.select()" />

To focus from inside your component logic you will need to add a few more things

1. Add a local variable name

<input type="text" #myInput (focus)="$event.target.select()" />

2. Use ViewChild to access your DOM element

@ViewChild("#myInput") myInputField: ElementRef;
editMyInputField(): void {
  this.myInputField.nativeElement.focus();
}

To trigger the selection programmatically from outside the component you will need to use @Input. Something along the lines of:

@Input() set myInputFocus() {
  this.editMyInputField();
}

All this should still be working with Angular 8. I did not test any of this on Angular 2 or 4.

It would get a bit more complicated if you're using dynamic inputs. For such cases, I have used a form as the parent reference rather than declaring many local variables in the component.

Answer 5

If you are using mat-input, you can try onfocus="this.select()"

<input matInput onfocus="this.select()">