typescript - Detectar o Foco do Input Usando Angular 2+
Estou tentando criar uma lista de auto-completar que aparece enquanto você digita, mas desaparece quando você clica em outro lugar do documento. Como faço para detectar que um campo de formulário está focado usando Angular 2. O Angular 1 tem ng-focus, mas eu não acho que o Angular 2 suporte isso mais.
<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>
A propósito, eu usei este tutorial como orientação.
Resposta #1
Existem eventos focus e blur:
<input (blur)="onBlur()" (focus)="onFocus()">
Resposta #2
Para aqueles que estão usando @angular/material, você pode obter uma referência à instância MatInput que implementa a interface MatFormFieldControl, expondo uma boa propriedade focused.
<mat-form-field>
<input matInput #searchInput="matInput" type="text" />
<mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>
