CODEWITHSUNDEEP
htmlangularclickdom-events
RolDev
RolDev

Reputation: 1

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

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.

Upvotes: 0

Views: 270

Answers (3)

Ali Shahbaz
Ali Shahbaz

Reputation: 845

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>

Upvotes: 1

Xinan
Xinan

Reputation: 3162

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
}

Upvotes: 0

Zze
Zze

Reputation: 18805

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();

    ...
}

Upvotes: 0

Related Questions