AppComponent after adding (keyup) handler on the search input

app.component.ts

...
import { ListKeyManager } from '@angular/cdk/a11y';
import { ListItemComponent } from './core/components/list-item/list-item.component';
import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';

...
export class AppComponent implements OnInit {
  ...
  keyboardEventsManager: ListKeyManager<any>;
  searchQuery: string;
  @ViewChildren(ListItemComponent) listItems: QueryList<ListItemComponent>;
  constructor(private usersService: UsersService) {
  }

  ...
  
  /**
   * @author Ahsan Ayaz
   * @desc Triggered when a key is pressed while the input is focused
   */
  handleKeyUp(event: KeyboardEvent) {
    event.stopImmediatePropagation();
    if (this.keyboardEventsManager) {
      if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) {
        // passing the event to key manager so we get a change fired
        this.keyboardEventsManager.onKeydown(event);
        return false;
      } else if (event.keyCode === ENTER) {
        // when we hit enter, the keyboardManager should call the selectItem method of the `ListItemComponent`
        this.keyboardEventsManager.activeItem.selectItem();
        return false;
      }
    }
  }
}