Detect Input Focus Using Angular 2+

Solution 1:

There are focus and blur events:

<input (blur)="onBlur()" (focus)="onFocus()">

Solution 2:

For those using @angular/material, you can get a reference to the MatInput instance which implements MatFormFieldControl interface exposing a nice focused property.

<mat-form-field>
  <input matInput #searchInput="matInput" type="text" />
  <mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>

Detect Input Focus Using Angular 2+

Solution 1:

Solution 2:

Related

Recent Posts