AppComponent after adding QueryList code for getting list items

app.component.ts

import { Component, OnInit, QueryList, ViewChildren } from "@angular/core";
import { UsersService } from "./core/services/users.service";
import { first } from "rxjs/operators";
import { ListKeyManager } from "@angular/cdk/a11y";
import { ListItemComponent } from "./core/components/list-item/list-item.component"; // importing so we can use with `@ViewChildren and QueryList

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  users: any;
  isLoadingUsers: boolean;
  keyboardEventsManager: ListKeyManager<any>;
  @ViewChildren(ListItemComponent) listItems: QueryList<ListItemComponent>; // accessing the ListItemComponent(s) here
  constructor(private usersService: UsersService) {}

  ngOnInit() {
    this.isLoadingUsers = true;
    this.usersService
      .getUsers()
      .pipe(first())
      .subscribe(users => {
        this.users = users;
        this.isLoadingUsers = false;
        this.keyboardEventsManager = new ListKeyManager<any>(this.listItems); // initializing the event manager here
      });
  }