2

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?

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • thanks, that's right side difference, what about left side `[rows]` vs `row`? – Max Koretskyi Nov 17 '16 at 17:12
  • 1
    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. – Günter Zöchbauer Nov 17 '16 at 17:13
  • 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? – Max Koretskyi Nov 17 '16 at 17:20
  • 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 http://stackoverflow.com/questions/35229960/cant-bind-to-for-since-it-isnt-a-known-native-property-angular2/35230069#35230069 – Günter Zöchbauer Nov 17 '16 at 17:22
  • okay, thanks. Gotta check the source code to understand the precise approach, but probably later when I get the basics :). – Max Koretskyi Nov 17 '16 at 17:29