Why does passing "this" from html become undefined?

I have an html button. When I pass "this" in the "onclick" to a function, it says it's the element is "undefined".

I have an html table with a delete button in each row. I want to delete the row when it is clicked.

Controller:

deleteRow(btn) {
  let row = btn.parentNode.parentNode;  //this should be the <tr> row element
  let name = row.getElementsByTagName("TD")[0].innerHTML;
  let table = document.getElementById("nutrient-table");
  table.deleteRow(row.rowIndex);
};

Template:

<tr>
  <td>Vitamin C</td>
  <td class="dv"></td>
  <td class="dv">2%</td>
  <td>
    <button class="fa fa-minus" (click)="deleteRow(this)"></button>
  </td>
</tr>

The error message says

> btn.parentNode is undefined

Another place I saw "btn is undefined"

Any ideas?

From Angular documentation, you should be able to access the button element from within the event handler code in HTML as $event.currentTarget, given that for native DOM elements, $event is a DOM event object. Hence you could try

<button class="fa fa-minus" (click)="deleteRow($event)">Delete Row</button>

and have the handler work out the row from the event object.

Please note I am not an Angular programmer and this approach, if it works, may be anathema to Angular-philes for all I know.

since you are using angular, this should be much simpler than you are making it. it should probably look something more like this:

<tr *ngFor="let row of rows">
  <td>Vitamin C</td>
  <td class="dv"></td>
  <td class="dv">2%</td>
  <td>
    <button class="fa fa-minus" (click)="deleteRow(row)"></button>
  </td>
</tr>