Full stack web app using Spring and Angular Search method not displaying alert properly

When a user is searching for a player that doesn’t exist, the alert message pops up in between me typing that name that doesn’t exist. The alert doesn’t stay on the page. When I am done typing the name that doesn’t exist, it still shows the page of all the players that already exist.

This is my app.component.html for the notification and for the ngModelChange.

<!-- Notification for no players -->
<div *ngIf="players?.length == 0" class="col-lg-12 col-md-12 col-xl-12">
<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">NO PLAYERS!</h4>
  <p>No Players were found.</p>
</div>
</div>

<form class="form-inline my-2 my-lg-0">
        <input type="search" (ngModelChange)="searchPlayers(key.value)" #key="ngModel" ngModel
         name="key" id="searchName" class="form-control mr-sm-2" placeholder="Search players..." required>
</form>

This is my app.component.ts search method

public searchPlayers(key: string): void {
    console.log(key);
    const results: Player[] = [];
    for (const player of this.players) {
      if (player.name.toLowerCase().indexOf(key.toLowerCase()) !== -1
      || player.email.toLowerCase().indexOf(key.toLowerCase()) !== -1
      || player.phoneNumber.toLowerCase().indexOf(key.toLowerCase()) !== -1
      || player.position.toLowerCase().indexOf(key.toLowerCase()) !== -1) {
        results.push(player);
      }
    }
    this.players = results;
    if (results.length === 0 || !key) {
      this.getPlayers();
    }
  }

Any suggestions would be appreciated.