Difference between binding using [] syntax and without

Question

I have a custom my-table with the property row bound to the host component. I can put html in two ways:

<my-table [rows]="displayEntriesCount"></my-table>

and like this:

<my-table rows="{{displayEntriesCount}}"></my-table>

what's the difference?

Günter Zöchbauer · Accepted Answer · 2016-11-17 17:10:29Z

2

<my-table [rows]="displayEntriesCount"></my-table>

binds the value in displayEntriesCount as is

<my-table rows="{{displayEntriesCount}}"></my-table>

does string interpolation. This means the assigned value is the stringified value of displayEntriesCount. Don't use this if you want to assign object values.

answered Nov 17, 2016 at 17:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Max Koretskyi Over a year ago

thanks, that's right side difference, what about left side [rows] vs row?

Günter Zöchbauer Over a year ago

You can either use [] or {{}} but not both at the same time, therefore there is no left side or right side. It's always both sides at the same time. If you use one of these it is Angular2 binding syntax, if you don't use any of these it's verbatim HTML and just added to the DOM as-is without Angular2 caring about it. Actually if you have an input named rows it will add the value as string. rows="displayEntriesCount" will pass the string "displayEntriesCount"` to the input.

Max Koretskyi Over a year ago

thanks, I'm just trying to understand the algorithm. what you're saying is that angular checks both sides at the same time? I would guess that it works first on the left side (target) and checks whether a component or DOM element has property, e.g. rows and if it does, evaluates the right side, otherwise it throws and error. Is it reasonable logic?

Günter Zöchbauer Over a year ago

It definitely checks both sides if it finds either [] or {{}} and if found then it also checks if there is a property with this name on the native element or if a component or directive is instantiated on this element that has an input with this name, otherwise it throws an error like the one mentioned in stackoverflow.com/questions/35229960/…

Max Koretskyi Over a year ago

okay, thanks. Gotta check the source code to understand the precise approach, but probably later when I get the basics :).

Collectives™ on Stack Overflow

Difference between binding using [] syntax and without

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related