Menu
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!
668
In Angular, you can use interpolation syntax for data binding for an expression as {{ expression}} . You can use inline expression or member variable inside {{ }} interpolation operator. Sometimes, you would like to use different interpolation characters instead of {{ }} for data binding. For example [ expession ].
Interpolation is a special syntax that Angular converts into property binding (pair of square bracket). It's a convenient alternative to property binding. Another major difference is that to set an element property to a non-string data value, we must use property binding.
The two-way data binding in Angular is used to display information to the end user and allows the end user to make changes to the underlying data using the UI. This makes a two-way connection between the view (the template) and the component class. This is similar to the two-way binding in WPF.
Interpolation is used to just display a piece of data in HTML, such as displaying a title or a name. Property binding lets us bind a property of a DOM object, for example the hidden property, to some data value.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
