Event Bubbling in Angular

event-bubble.component.html

<div (click)="handleAction($event)">
  <div *ngFor="let item of listing">
    <div>{{ item.label }}</div>
    <div>
      <button [attr.data-id]="item.id"
              data-action="modify">
          Modify
      </button>
      <button [attr.data-id]="item.id"
              data-action="delete">
          Delete
      </button>
    </div>
  </div>
</div>

event-bubble.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

interface Item {
  id: string;
  label: string;
}

@Component({
  selector: 'event-bubble',
  templateUrl: './event-bubble.component.html'
})
export class EventBubbleComponent {
  @Input() listing: Item[] = [];

  @Output() modify = new EventEmitter<string>();
  @Output() delete = new EventEmitter<string>();

  handleAction(event) {
    const {id, action} = event.target.dataset;
    if (action === 'modify') {
      this.modify.emit(id);
    } else if (action === 'delete') {
      this.delete.emit(id);
    }
  }
}