Search code examples
angularstring-interpolationangular2-databinding

String interpolation in Angular2 event binding

I'm using an ngFor to list my data, and would like to be able to click an element and have it call a method in my component class, identifying which element of the data it is. My attempts basically came to something like this:

<ng-template ngFor let-item [ngForOf]="data">
  <span class="table-select" (click)={{"editData(" + item + ")"}}>{{item}}</span>
</ng-template>

However that doesn't work and throws this error: 

Error: Template parse errors: Unexpected closing tag "span".

I have thought about just passing this and using the native element to figure out which element it is, but that feels dirty and not very angular y. So am I doing this wrong? Or is there a better way to go about this?

Solution

  • try

    <span class="table-select" (click)="editData(item)">{{item}}</span>

    angular will know to look in your component class for the editData method because of the directive (click)