Add a dropdown menu to a clickable table row in Angular 6 with Bootstrap 4

Question

I'm working on an account book with a table, which shows all available accounts. Each row shows basic information about a specific account and by clicking on a row Angular routes to a detail view for that account.

Now I want to include a dropdown menu in the last or very right cell of each row, where users can select a specific action related to accounts, i. e. "Enter revenue", "Enter expense", ...

With the provided code below, I'm not able to select an option of the dropdown, because Angular immediately routes to the detail view, because of course I'm clicking the row as well, when clicking the dropdown.

<table class="table accounts-body">
          <thead>
            <tr>
              <th>Accounttype</th>
              <th>Accountnumber</th>
              <th>Balance</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr class="account" *ngFor="let account of 
                depositor.bankAccounts" (click)="onAccountClicked(account)">
              <td class="table-entry">{{account.accountType}}</td>
              <td class="table-entry">{{account.accountNumber}}</td>
              <td class="table-entry">{{account.balance | number: '1.2-2'}} EUR</td>
              <td class="table-entry">
                <select (change)="onActionSelected($event)>
                  <option>enter revenue</option>
                  <option>enter expense</option>
                </select>
              </td>
            </tr>
            <tr class="total">
              <td colspan="2">Sum:</td>
              <td colspan="2">
                {{getTotal(depositor) | number: '1.2-2'}} EUR
              </td>
            </tr>
          </tbody>
        </table>

How can I prevent Angular to route to the details view when clicking the dropdown menu to select an action?

Daniel Hilgarth · Accepted Answer · 2019-04-12 15:05:22Z

1

Try to prevent the bubbling of the click event when you click on the select.

Something along the lines of

<select (click)="$event.stopPropagation()" ...

answered Apr 12, 2019 at 15:05

Daniel Hilgarth

175k41 gold badges346 silver badges450 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PHilgarth Over a year ago

Thank you :) That did the job. Didn't think about bubbling events.

Collectives™ on Stack Overflow

Add a dropdown menu to a clickable table row in Angular 6 with Bootstrap 4

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related