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?

drew moore · Accepted Answer · 2016-05-19 01:29:07Z

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"

edited May 19, 2016 at 1:29

answered May 19, 2016 at 1:19

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Metro Smurf Over a year ago

result is the entire object; wouldn't you want to pass result.name if you wanted the console to print "John" in passValue?

Eric Scandora Over a year ago

Yes, Metro Smurf that is what I ended up doing and it worked

drew moore Over a year ago

@MetroSmurf good eye, thanks for pointing that out. answer updated.

Eric Scandora Over a year ago

It actually did not need the ? operator here, but for some reason I need it for displaying the values

drew moore Over a year ago

@EricScandora - that's called the Elvis operator, you should google it. It prevents the error that would otherwise occur if result was undefined when the template is drawn

|

Collectives™ on Stack Overflow

Angular 2 data binding to a non-input

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related