How to get table's td value by checkbox checked in angular 8

Question

MMy question is siple.I am trying to get td value by checking checkbox.When i click the checkbox i want to get same row product name.How to do it?

Demo: https://stackblitz.com/edit/angular-ol2sir?file=src/app/app.component.ts

app.component.ts:

 getProoduct(e){ 
     if(e.target.checked) 
      { 
       const target = e.originalEvent.toElement.closest('tr'); 
       let tdProduct= target.querySelector('td:nth-child(3)').innetText; 
       console.log(tdProduct); 
      }  
 }

Answer 1

Just replace your checkbox td with

    <td> <input type="checkbox" [(ngModel)]="data.isSelected" (change)="getProoduct(data.isSelected, data.product_name)"> </td>

And now the function with

  getProoduct(isSelected, product){
    console.log(isSelected, product)
  }

Full working example: https://stackblitz.com/edit/angular-glxfq5

Actually, you could directly pass data to the function and have all fields available in case you also need p_id or any other field in the future.