0

my problem is, that i want to route to a new page as soon as i click on the grey card. But the problem is that my button on the right does not work anymore if i put the click listener on the mat-card-content, because it will also trigger getRecipe(). And if i put it into the span it only works if i have a title. How can i fix this?

enter image description here

<section class="recipe" *ngFor="let recipe of cookbook">
  <mat-card class="recipe__card" >
    <mat-card-content class="recipe__card-content" >
      <span class="recipe__title" (click)="getRecipe(recipe.id)">{{recipe.title}}</span>
      <button mat-icon-button [matMenuTriggerFor]="menu" class="recipe__more-btn">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <span>Edit</span>
        </button>
        <button mat-menu-item (click)="deleteRecipe(recipe.id)">
          <span>Delete</span>
        </button>
      </mat-menu>
    </mat-card-content>
  </mat-card>
</section>
bea2803
  • 49
  • 5

1 Answers1

0

you can avoid this by stopping the event propagation:

 <button mat-menu-item (click)="deleteRecipe(recipe.id); $event.stopPropagation()">
          <span>Delete</span>
 </button>

Source: Stop mouse event propagation

Sain Pradeep
  • 3,119
  • 1
  • 22
  • 31