Override routerLink on Button Click

Question

I have an ecommerce site I'm making, and my goal is to have multiple input points per object, for instance, they click/tap anywhere on the card except the button, it will go to the product details while clicking/tapping on the button would add that item to the cart.

Currently I have no problem having it forward to the details, it will forward to the details even if the button is tapped. I'd like to have the button's action override the router.

Here's my current attempt:

<a *ngFor="let item of list"  >
<div class="col-lg-3 col-md-4 col-xs-6">
    <div class="card" [routerLink]="['/detail', item.item_number]">
    <img style ="width:170px;height:150px; display:block;"alt="170x150" src="{{item.item_image}}">

    <div class="card-block">
    <p class="card-text text-muted">{{item.item_name}}</p>
    <p class="card-text">Size:{{item.item_length}}</p>
    </div>

    <div class="container">        
    <button type="button" class="btn btn-primary btn-block" (click)="addItem()">Add<span [routerLink]="['/detail', item.item_number]" [class.disabled]="disabled ? true : null"></span></button>
    </div>
</div>
</div>
</a>

I was hoping that nesting a disable command in the button would work, but that doesn't seem to be the case. Any ideas would be amazing!

Answer 1

Adding stopPropagation() to your button's click event should solve the problem:

<button type="button" class="btn btn-primary btn-block" 
(click)="addItem();$event.stopPropagation()">Add<span [routerLink]="['/detail', item.item_number]" 
[class.disabled]="disabled ? true : null"></span></button>

This prevents further propagation of the current event in the capturing and bubbling phases. Read more about stopPropagation() here.