Auto select the content of a matInput using a mat-icon

Question

I have one matInput field and a mat-icon(edit icon). When I click on the edit icon I need to perform the following operations

enable the input text box,

sets focus to it,

and auto-selects all the text in that.

Tried '$event.target.select()'. But it is not working. How can I do that? Thanks in advance.

.html file

<mat-form-field class="input-style">
 <input matInput[(ngModel)]="name"(click)="$event.target.select()">
  {{value}}
 </mat-form-field>
<button mat-icon-button color="primary">
 <mat-icon (click)="$event.target.select()">edit</mat-icon>
</button>

.ts file

export class  Sample {
 public value:string ="sample";
}

U can try this --> https://stackoverflow.com/questions/4067469/selecting-all-text-in-html-text-input-when-clicked — sagat, Aug 08 '19 at 12:05

score 1 · Accepted Answer · answered Aug 08 '19 at 12:32

You can do that with local elementRef var :

<mat-form-field class="input-style">
    <input matInput #inputRef [(ngModel)]="name">
    {{value}}
</mat-form-field>
<button mat-icon-button color="primary">
    <mat-icon (click)="inputRef.select()">edit</mat-icon>
</button>

WORKING DEMO

Auto select the content of a matInput using a mat-icon

1 Answers1