Pesquisa de site

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>

Artigos relacionados