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.