Angular 2 data binding to a non-input

Question

Angular 2 Version:rc.1

I am returning a list of names and places in a table using *ngFor and I want to bind the data to the cell that I click on to a variable in my component.

component.html

<tr *ngFor="let result of Results$">
  <td #foo (click)="passValue(foo)">
    {{result?.name}}
  </td>
  <td>
    {{result?.place}}
  </td>
</tr>

component.ts

passValue(foo) {
  this.value = foo;
  console.log(foo);
}

In the console I am getting the following when I click on a cell with "John" as its value:

<td _ngcontent-pof-13="">
    John
</td>

Ideally, the console would just log "John" instead of the entire td element.

Or maybe there is an entirely different and better way to do it.

Any ideas?

Answer 1

<tr *ngFor="let result of Results$">
   <td #foo (click)="passValue(foo)">

#foo here is a template reference variable - a reference to the DOM element itself. result is a reference to the data you're binding to - in this case, an object with name field with value "John":

So, replace

<td #foo (click)="passValue(foo)">  // prints the td element 

by:

<td #foo (click)="passValue(result?.name)"> // prints "John"