EventEmitter not updating array in parent component in Angular 6

Question

I'm trying to update members in a team in an Angular6 web-app. I created a modal to select the member you want to remove from the team. Then you click submit and it calls the service to remove them from the team on the database. If that's successful then the code removes the member from the local member account list and emits the updated list to the parent component. It then routes back to the team page but it's still showing the removed member in the member list. When i refresh the page it removes the member from the list but that's because it's making another call to the server and just repopulating the member list.

This is the Account class:

/**
 * Model for client-side accounts.
 */
export class Account {
  email: string;
  password: string;
  firstName: string;
  lastName: string;
  isDeleted: boolean;
}

Here is the html for the button on the child component 'remove-member.component':

<div id="removeMemberModal" class="modal">
...
  <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="removeMember()" data-dismiss="modal">
        Submit
      </button>
      <button type="button" class="btn btn-secondary" data-dismiss="modal">
        Cancel
      </button>
  </div>
</div>

Here is the child component typescript file:

@Component({
  selector: 'app-remove-member',
  templateUrl: './remove-member.component.html',
  styleUrls: ['./remove-member.component.css']
})
export class RemoveMemberComponent implements OnInit {
  public email;
  @Input() teamId: number;
  @Input() accounts: Account[];
  @Output() updatedAccounts = new EventEmitter<Account[]>();

  constructor(private teamService: TeamService) { }

  ngOnInit() {
  }

  removeMember() {
    this.teamService.removeTeamMember(this.teamId, this.email)
      .subscribe(() => {
        var index = this.accounts.indexOf(this.email);
        if(index > -1) {
          this.accounts.splice(index, 1);
        }
        this.updatedAccounts.emit(this.accounts);
      }, (err) => {
        console.log(err);
      });
  }

  getEmail(email: string) {
    this.email = email;
    console.log("email = ", email);
  }
}

Here is relevant parent component html:

<!-- This displays the member list -->
<ul class="list-group">
  <button class="btn btn-info btn-sm" [hidden]="!isMemberOfTeam()" data-toggle="modal" data-target="#inviteMember">+ Invite</button>
  <div class="list-group-item list-group-item-action flex-column align-items-start" *ngFor="let account of accounts">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1"><a (click)="getRoute(account.email)">{{ account.firstName }} {{ account.lastName }}</a></h5>
    </div>
    <p class="mb-1">{{ account.email }}</p>
  </div>
</ul>
...
<!-- Child component modal -->
<li class="list-inline-item">
    <a class="nav-link" href="#" data-toggle="modal" data-target="#removeMemberModal">
      Remove Member
    </a>
</li>
...
<app-remove-member [teamId]="team.id" [accounts]="accounts" (updatedAccounts)="onAccountsUpdated($event)"></app-remove-member>

And here is the relevant parent component typescript code

export class TeamInfoComponent implements OnInit {
  public team: Team;
  public accounts: Account[] = [];
  public lastWeeksMetrics: number;
  public thisWeeksMetrics: number;
  public toAuthorize: AddUserRequest[] = [];

...

  /**
  * Updates the account members list (DOESN'T UPDATE MEMBER LIST DISPLAYED)
  * @param updatedAccounts The updated account information
  */
  onAccountsUpdated(updatedAccounts: Account[]) {
    this.accounts = updatedAccounts;
  }
...
}

All the other posts I've found with similar questions seem to be just a connection problem between the parent and child component, like they weren't using the proper component selector, and I'm fairly confident that's not the issue, but maybe i'm wrong. Thank you.