CODEWITHSUNDEEP
angularangular-material
spc
spc

Reputation: 141

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

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";
}

Upvotes: 0

Views: 1269

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58523

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

Upvotes: 1

Related Questions