1

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.

sr28
  • 4,728
  • 5
  • 36
  • 67
  • 1
    Possible duplicate of [How can I conditionally disable the routerLink attribute?](https://stackoverflow.com/questions/35431188/how-can-i-conditionally-disable-the-routerlink-attribute) – ForestG Apr 18 '18 at 11:18
  • It's not that answer – Arash Apr 18 '18 at 11:26
  • @ForestG - thanks for the link, however I'm very new to Angular and I'm not sure how to disable a routerLink in a parent row. The answer seems to demonstrate how you simply turn on/off routerLink conditionally within the element it resides. – sr28 Apr 18 '18 at 11:28
  • 1
    @sr28 check this https://stackblitz.com/edit/angular-pqna6e – MD KAMRUL HASAN SHAHED Apr 18 '18 at 11:30

0 Answers0