Set focus on input field with autocomplete in angular

Project Codever

1. get access to the input field via template variable @ViewChild('publicSearchBox') searchBoxField: ElementRef;
2. get access to the autcomplete trigger to close the panel (we don’t want that when the page loads) - @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;`
3. call focus() and closePanel() on the two elements in one of Angular’s lifecycle hooks - here in AfterViewInit

@Component({
  selector: 'app-searchbar',
  templateUrl: './searchbar.component.html',
  styleUrls: ['./searchbar.component.scss']
})
export class SearchbarComponent implements OnInit, AfterViewInit {

  @ViewChild('publicSearchBox') searchBoxField: ElementRef;
  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

  ngAfterViewInit(): void {
    this.searchBoxField.nativeElement.focus();
    this.autocompleteTrigger.closePanel();
  }

}

Below you can see how the referenced template variable (publicSearchBox) and the angular autocomplete trigger are defined in the angular html template:

  <input
    #publicSearchBox
    #autocompleteTrigger="matAutocompleteTrigger"
    matInput
    type="text"
    class="form-control"
    [formControl]="searchControl"
    placeholder=""
    [matAutocomplete]="auto"
    (focus)="focusOnSearchControl()"
    (focusout)="unFocusOnSearchControl()"
    [class.my-snippets-selection]="searchDomain === 'my-snippets'"
    [class.my-bookmarks-selection]="searchDomain === 'my-bookmarks'"
    [class.public-snippets-selection]="searchDomain === 'public-snippets'"
    (keyup)="watchForTags(publicSearchBox.value)"
    (keyup.enter)="$event.target.blur(); autocompleteTrigger.closePanel();searchBookmarksFromSearchBox(publicSearchBox.value)"
  >

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏