Angular 2 binding within binding. Interpolation within event

Question

Trying to do the following and getting "Got interpolation ({{}}) where expression was expected" error.

<ul>
  <li *ngFor="#item of items">
    <a href='' (click)="foo('{{item.name}}')">{{item.name}}</a>
  </li>
</ul>

Thanks!

Answer 1

Don't use {{}}(interpolation) inside any event handler code (on a view), do pass expression directly which will get evaluated against Component context(this), like over here you're trying to pass item.name to foo function. So removing {{}} parenthesis would do the trick.

<a href="" (click)="foo(item.name)">
  {{item.name}}
</a>