Detect Input Focus Using Angular 2+

Question

I\'m trying to create an auto-complete list that appears as you type, but disappears when you click elsewhere on the document. How do I detect that a form input is focused u

Answer 1

You can use the ngControl directive to track change-state and validity of form fields.

<input type="text" ngControl="name" />

The NgControl directive updates the control with three classes that reflect the state.

State: Control has been visited

ng-touched
ng-untouched

State: Control's value has changed

ng-dirty
ng-pristine

State: Control's value is valid

ng- valid
ng- invalid

Answer 2

You could also use FocusMonitor from @angular/cdk.

https://material.angular.io/guide/creating-a-custom-form-field-control#focused

focused = false;

constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
  ...
  fm.monitor(elRef.nativeElement, true).subscribe(origin => {
    this.focused = !!origin;
    this.stateChanges.next();
  });
}

ngOnDestroy() {
  ...
  this.fm.stopMonitoring(this.elRef.nativeElement);
}

Answer 3

There are focus and blur events:

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

Answer 4

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>