Prevent navigation when on checkbox interaction

I have a component that is rendering array of objects as mat-list-item. Each item has a mat-checkbox, text and it is also binded to routerLink. When checkbox is checked the item is being navigated and I want to prevent that, meaning when checkbox is interacted with no navigation will happen.

Here is a code example

You can add click event on the checkbox and block the click event triggering up by $event.stopPropagation() like this

<mat-nav-list>
  <mat-list-item *ngFor="let item of entries" routerLink="/person/{{item.PersonId}}">
    <div>
      <mat-checkbox  (click)="$event.stopPropagation()" (change)="onChange()"></mat-checkbox>
      {{item.Name}}
    </div>
  </mat-list-item>
</mat-nav-list>
<app-autocomplete-test></app-autocomplete-test>

DEMO: https://stackblitz.com/edit/angular-navlistitem-sa23ag-dkhfu4?file=src/app/app.component.html