Angular Routing Failure - Modal Pop Up

Question

I'm working in Angular 8. I'm using NG-BOOTSTRAP for styling.

In several of my components I offer the ability to click a delete button on an item, this brings up a modal window with a YES or NO and when YES is clicked, the modal closes and the route appears to refresh, no actual browser refresh - this is what I want. The list is updated correctly and all seems fine. Then, when I try and click on any other route in my navbar they all fail and the page stays where it's at until I refresh the browser page - also, the link in the URL bar isn't updating, which I suspect is causing the pages not to be able to be routed to. Not sure why this behavior is happening. Frustrating too. Looking for some assistance if possible. Thanks.

THIS IS THE HTML TABLE

<tbody>
              <tr *ngFor="let client of clients">
                <td>{{ client.name | titlecase }}</td>
                <td>{{ client.website }}</td>
                <td>{{ client.phone }}</td>
                <td>{{ client.address.street | titlecase }}, {{ client.address.city | titlecase }}
                  {{ client.address.state | uppercase }}
                  {{ client.address.zip }}</td>
                <td>
                  <button class="btn btn-primary" (click)="editClient(client._id)">
                    <fa-icon [icon]="faEdit"></fa-icon>
                  </button>
                  <button class="btn btn-danger ml-3" (click)="open(content, client)">
                    <fa-icon [icon]="faTrashAlt"></fa-icon>
                  </button>
                </td>
              </tr>
            </tbody>

----- THIS IS THE MODAL TEMPLATE (SAME HTML PAGE)------

<!-- MODAL TEMPLATE -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Delete Client?</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm">
        <button class="btn btn-success mr-3" (click)="deleteClient(modalContent._id)">YES</button>
        <button class="btn btn-danger" (click)="modal.close('Close click')">NO</button>
      </div>
    </div>
  </div>
</ng-template>


----- THIS IS THE TS FILE -----

deleteClient(id) {
    this._clientService.deleteClient(id).subscribe(
      response => {
        console.log(response['message']);

        // Close the modal window and reload the component
        this._modalService.dismissAll();
        this.reloadComponent();
      },
      error => console.log(error['message'])
    );
  }

  ///// MODAL FUNCTIONS
  open(content, client) {
    this.modalContent = client;
    this._modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  ///// FUNCTION TO RELOAD PAGE AFTER DELETE /////
  reloadComponent() {
    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
    this._router.onSameUrlNavigation = 'reload';
    this._router.navigate(['admin/clients']);
  }

Answer 1

Instead of reloading the page you could re-execute the call that binds the results from the backend to your clients var. This is at least a nice separation of sources & routing and can avoid further complications.

Something like:

deleteClient(id) {
 this._clientService.deleteClient(id).subscribe(
  response => {
    console.log(response['message']);

    // Close the modal window and reload the component
    this._modalService.dismissAll();
    this.getClients();
  }, error => console.log(error['message'])
});

getClients() {
 this._clientService.getClients().subscribe(
  response => {
    this.clients = response.data;
  }, error => console.log(error['message'])
});