How can I make a table row clickable for a link but the last column not have the same behavior?

Question

Below is the code I am working with that demonstrates what I want to achieve

<tr *ngFor="let plan of list; index as i" class="success" (click)="platDetails(plan)"> 
    <!-- the click event above takes us to the platDetails view-->
    <td>{{plan.name}}
    </td>
    <td>{{plan.test}}
    </td>
    <td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
        <div class="input-group">
            <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fa fa-ellipsis-h"></i>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" (click)="action(plan)">View Plan</a>
            </div>
        </div>
    </td>
</tr>

How can I split this tr to allow for those two td or how ever many to be controlled by the tr click event and leave the last td on its own? I hope that makes sense.

Does `action(plan)` trigger at all when you click it, or only `platDetails(plan)` ? — Zze, Oct 04 '18 at 21:43
@Zze i am assuming it is being triggered, platDetails(plan) changes the view,. If i remove the platDetails(plan) then yes it gets triggered — RolDev, Oct 04 '18 at 21:48
Why not put `click` event on `` rather on `` and leave last column? — Ali Shahbaz, Oct 04 '18 at 21:51

score 1 · Answer 1 · answered Oct 04 '18 at 21:58

Move platDetails click event from row to column and leave last column

<tr *ngFor="let plan of list; index as i" class="success"> 
<!-- the click event above takes us to the platDetails view-->
<td (click)="platDetails(plan)">{{plan.name}}
</td>
<td (click)="platDetails(plan)">{{plan.test}}
</td>
<td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
    <div class="input-group">
        <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" (click)="action(plan)">View Plan</a>
        </div>
    </div>
</td>

that is a solution that works however, for my instance that isn't a scalable solution, therefore I will not be able to use that solution. — RolDev, Oct 05 '18 at 14:13
Okay, at this time I'm not able to give you solution but please search about `event bubbling`. Here is some useful information for it. https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Ali Shahbaz, Oct 05 '18 at 14:41

score 0 · Answer 2 · answered Oct 04 '18 at 21:54

You can probably just prevent event propagation:

First, pass the event through to your function:

<a class="dropdown-item" (click)="action(plan, $event)">View Plan</a>

Then in your function:

public function action(plan: Plan, event: any){
    event.stopImmediatePropagation();
    event.stopPropagation();
    event.preventDefault();

    ...
}

score 0 · Answer 3 · answered Oct 04 '18 at 21:55

0

You just need to stop the event propagation from your action() click, something like the following:

(click)=action(plan, $event)

action(plan, event) {
  event.stopPropagation();
  // do your other action business
}

answered Oct 04 '18 at 21:55

Xinan

3,002
1
16
18

How can I make a table row clickable for a link but the last column not have the same behavior?

3 Answers3