0

I have something like:

<ion-item
        *ngFor="let recipe of recipes"
        [routerLink]="['./',recipe.id]"
      >
        <ion-avatar><ion-img [src]="recipe.imageURL"></ion-img></ion-avatar>
        <ion-label>{{ recipe.name }}</ion-label>
        <ion-button
          (click)="deleteRecipe(recipe.id)"
          color="danger"
          ><ion-icon name="trash-outline"></ion-icon
        ></ion-button>
      </ion-item>

Which work as whenever I click on the item consistenting of an image, text and a delete button (and all the whitespace from the ion-item) we get redirected to the details page. I am wondering if it is possible to override this navigation where we stay on the same page when clicking the delete button?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Adam Jones
  • 13
  • 1
  • 1
  • 6

2 Answers2

0

Actually you need to return false on the method you are calling. This will prevent the routerlink from getting fired.

Judson Terrell
  • 4,204
  • 2
  • 29
  • 45
-2

You need to use the stopPropagation() event method on your button. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

StackoverBlows
  • 473
  • 7