Disable input field while searching and set focus on completion

Question

I have an input field and on typing I want to search for items and also disable the text field while doing the search in background so that no more letters can type in that input, but on completion of search function, the focus should be the search input field so that user can start typing.

Html:

<input [disabled]="(displayLoader > 0)" [ngModel]="''" (ngModelChange)="updateData($event)" class="form-control-search" placeholder="Search"/>

component:

updateData(event) {
   this.displayLoader = 1
   //search function
   //on completion
   this.displayLoader = 0; 
}

Here I used disabled, but on completion it is not focusing the input field and also cannot type until the user manually click the input field.

Answer 1

try this code. does this help. html

<input [disabled]="(displayLoader > 0)" [ngModel]="''" #focusable (ngModelChange)="updateData($event,focusable)" class="form-control-search" placeholder="Search"/>

component

 updateData(event,el) {
       this.displayLoader = 1
       //search function
       //on completion
       this.displayLoader = 0; 
    el.focus();
    }