CODEWITHSUNDEEP
angular-material
quoci
quoci

Reputation: 3557

How to mark/highlight input in Angular?

I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?

<mat-form-field>
  <input matInput [(value)]="test">
</mat-form-field>

Upvotes: 1

Views: 2346

Answers (1)

uminder
uminder

Reputation: 26170

Assuming you're using Angular 8, you can use @ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with @ViewChild, you can use a template reference variable (e.g. #food).

Please have a look at the following StackBlitz

Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.

Upvotes: 1

Related Questions