如何将焦点设置在 ViewChildren QueryList 的第一个元素上？

Question

Objective I have a search button that returns an API response of books. After the search button is clicked, Angular/JavaScript should set focus on the first element from a ViewChildren QueryList.

Template:

<form [formGroup]="searchForm" (submit)="searchBooks()">
  <mat-form-field>
    <input matInputformControlName="term"/>
    <button aria-label="Search" mat-icon-button matSuffix>
      <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>
</form>

<ng-container *ngIf="books$ | async as books">
    <div class="book" *ngFor="let book of books">
      <div #bookItem tabindex="-1">
        {{ book.title }}
      </div>
     ...
</ng-container>

Component:

export class AppComponent {
  @ViewChildren('bookItem') bookItem: QueryList<ElementRef>;
      searchBooks() {
        if (this.searchForm.value.term) {
          this.store.dispatch(searchBooks({ term: this.searchTerm })); // fetches books from an API
          this.bookItem.first.nativeElement.focus() // what I thought would work
         } 
      }

When I try to set focus I get the following error:

Cannot read property 'nativeElement' of undefined

I'm thinking this could be because of the asynchronous nature of fetching books from an API. Any idea on how to set focus to the first element of a ViewChildren list?

Answer 1

this.bookItem.get(0).focus() or this.bookItem.first.focus() will set the focus for the first element of Viewchildren list.

Answer 2

I suggest subscribe to bookItem.changes like this SO

If you don't want make it at very early use a variable "yet" at first value=false and in searchBook equal true

  ngAfterViewInit()
  {
     this.inputs.changes.subscribe(res=>{
       if (this.yet && res.length)
        res.first.nativeElement.focus()
     })
  }