Html Question posted in
Some basic documentation can be found here.

Html – Call Delete event on tr and td angular

I have this tr and td tag both have onclick event

<tr (click)="update(list.Item)" *ngFor="let list of List | paginate: { itemsPerPage: 10, currentPage: p };">
              
              <td style="width:5%" (click)="delete(list.Item)">  
                <a title="Delete"><i class="icon-trash"
                  style="margin-right: 10px"></i></a>
              </td>
            </tr>




delete(itemID)
  {

  }

issue is when i click on td event then also tr event is getting called i want to restrict tr event click when td is clicked.

Tags:

2

Answers


  1. 0

    This issue is because the <td> is inside the <tr>, then every time you push your <td> the <tr> event is called too, you can try to put the longpress option to the <tr> and use the (click) to the <td>

    Like this:

    <tr longPress (mouseLongPress)="update(list.Item)">
  <td style="width:5%" (click)="delete(list.Item)">
    <a title="Delete"> Test </a>
  </td>
</tr>
    Login or Signup to reply.
  2. 0

    You need to use stopPropagation to stop the event from bubbling upwards and triggering the other events!

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
        <table>
        <tr>
            <th class="sticky">No.</th>
            <th class="sticky">Firstname</th>
            <th class="sticky">Lastname</th>
            <th class="sticky">Age</th>
        </tr>
        <tr (click)="rowClick($event)">
            <td (click)="cellClick($event)">1</td>
            <td (click)="cellClick($event)">Jill</td>
            <td (click)="cellClick($event)">Smith</td>
            <td (click)="cellClick($event)">50</td>
        </tr>
        <tr (click)="rowClick($event)">
            <td (click)="cellClick($event)">1</td>
            <td (click)="cellClick($event)">Eve</td>
            <td (click)="cellClick($event)">Jackson</td>
            <td (click)="cellClick($event)">94</td>
        </tr>
        <tr (click)="rowClick($event)">
            <td (click)="cellClick($event)">1</td>
            <td (click)="cellClick($event)">Alfreds Futterkiste</td>
            <td (click)="cellClick($event)">Maria Anders</td>
            <td (click)="cellClick($event)">Germany</td>
        </tr>
    </table>

  `,
})
export class App {
  name = 'Angular';

  rowClick(event: Event) {
    console.log('row click');
  }
  cellClick(event: Event) {
    event.stopPropagation();
    console.log('cell click');
  }
}

bootstrapApplication(App);

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search