So I've got a table row like this:
<tr [routerLink]="/somepath" *ngFor="let item of itemsToShow; let i = index">
<td>Item Name
<input type="checkbox" [ngModel]="" class="myClass" id="row{{i}}" (click)="modifyItem(item, $event);" />
<label class="myLabelClass" for="row{{i}}"></label>
</td>
</tr>
In my modifyItem method I have the following:
modifyItem(item: Item, event){
....do some logic based on the item
event.stopPropagation();
}
However, the above doesn't work. When clicking on the checkbox it just redirects to where the routerLink defines. How do I stop that from happening on the click of the checkbox?
The suggested link seems to show how to disable routerLink for the current element it's in, so in another words, turn an anchor into a link or not. What I want to happen is to be able to turn of the routerLink for a parent element. In this case I want to be able to have all tds within a tr element use the routerLink with the exception of one that has a checkbox, which will do something else.