Обнаружение фокуса ввода с использованием Angular 2+

Я пытаюсь создать список автозаполнения, который появляется по мере ввода, но исчезает, когда вы нажимаете в другом месте документа. Как определить, что ввод формы сосредоточен с использованием Angular 2. Angular 1 имеет ng-focus, но я не думаю, что Angular 2 больше это поддерживает.

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

Кстати, я использовал этот учебник как руководство.

Ответы

Ответ 1

Есть события focus и blur:

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

Ответ 2

Вы можете использовать директиву ngControl для отслеживания состояния изменения и допустимости полей формы.

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

Директива NgControl обновляет элемент управления тремя классами, которые отражают состояние.

Состояние: элемент управления посещен

ng-touched
ng-untouched

Состояние: значение управления изменилось

ng-dirty
ng-pristine

Состояние: действительное значение управления

ng- valid
ng- invalid

Ответ 3

Для тех, кто использует @angular/material, вы можете получить ссылку на экземпляр MatInput, который реализует интерфейс MatFormFieldControl, демонстрирующий хорошее свойство focused.

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