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.
hasFocus() : whether the document or any element inside the document has focus. document. activeElement : Property containing which element currently has focus.
HTML DOM Document hasFocus() The hasFocus() method returns a true if the document (or any element in the document) has focus. Otherwise it returns false .
The ng-focus directive tells AngularJS what to do when an HTML element gets focus. The ng-focus directive from AngularJS will not override the element's original onfocus event, both will be executed.
There are focus
and blur
events:
<input (blur)="onBlur()" (focus)="onFocus()">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With