2

In the angular tutorial there is this example:

<h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

it works great if I am writing it like this:

<h3>
    <a title="{{product.name + ' details'}}">
      {{ product.name }}
    </a>
  </h3>

what is the difference? and what is the best practice?

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
Ponpon32
  • 2,150
  • 2
  • 15
  • 26

1 Answers1

6

The first one is property binding using the anotation []

The second one is normal interpolation.

Difference between Interpolation and Property Binding.

Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding.

Property Binding: to set an element property to a non-string data value, you must use property binding.

So to display none any type of data (include string) value use Property Binding or if you want to display normal string value use {{}} interpolation

Source: https://www.codementor.io/adekunleoyaniyi/interpolation-vs-property-binding-in-angular2-eu1tzbyn4

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
  • Can you link the post to the source of the quoted text? – lealceldeiro Aug 05 '19 at 15:05
  • You can also use property bindings with `[]` to bind a string value. Interpolation has to return a string, whereas property binding can evaluate to any value type – Drenai Aug 05 '19 at 15:10