Detect Input Focus Using Angular 2+ - web

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 using Angular 2. Angular 1 has ng-focus, but I don't think Angular 2 supports that anymore.
<input id="search-box" type="search" class="form-control [(ngModel)]=query (keyup)=filter()>
<div id="search-autocomplete" *ngIf="filteredList.length > 0">
<ul *ngFor="#item of filteredList" >
<li > <a (click)="select(item)">{{item}}</a> </li>
</ul>
</div>
By the way, I used this tutorial as guidance.

Answer 1

There are focus and blur events:
<input (blur)="onBlur()" (focus)="onFocus()">

Answer 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>

Answer 3

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 4

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