Detect Input Focus Using Angular 2+

wpakt picture wpakt · Apr 20, 2016 · Viewed 65.6k times · Source

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

kemsky picture kemsky · Apr 20, 2016

There are focus and blur events:

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