Expected behavior

Just a value change in click function of button in a modal.

Actual behavior

Value changes, but immediately after that the modal closes itself. If I do smth else in the function, like console.log(), this doesn't happen and the modal stays open as expected.

Tested in Google Chrome Version 92.0.4515., Firefox 91.0.2 (64-Bit), Microsoft Edge Version 92.0.902.84

Resources (screenshots, code snippets etc.)

HTML

<div class="modal-body" style="overflow-x: hidden">
  <div *ngIf="showExtraStops">

    <ng-container *ngFor="let stop of order.stops; let i=index">

      <app-address-stop-table class="mb-2 mt-2" [destination]="stop"
                              [title]="'Zwischenziel '+(i+1)"></app-address-stop-table>

      <div class="d-flex justify-content-center align-items-center m-4">
        <i class="fas fa-arrow-right fa-3x"></i>
      </div>

    </ng-container>

  </div>

  <div *ngIf="!showExtraStops" class="d-flex align-items-center">

    <button type="button" class="btn" (click)="toggleShowExtraStops()">
      Zwischenziele anzeigen
    </button>

    <div class="d-flex justify-content-center align-items-center m-4">
      <i class="fas fa-arrow-right fa-3x"></i>
    </div>

  </div>
</div>

TS

  showExtraStops: boolean = false;

  toggleShowExtraStops() {
    this.showExtraStops = !this.showExtraStops;
  }