TypeScript 2.x By Example

Property binding

Property binding is another form of interpolation. It allows us to bind the existing properties of the HTML elements with the properties or methods defined in the component. Here is the syntax of property binding:

<img [src] ='article.url'></img>

In the preceding example, we have bound the source property of img tag to the URL property of the article object. The following is the example of how we can write the same binding in interpolation:

<img src ={{article.url}}></img>

Here in interpolation, the attribute is not enclosed in the square brackets, but the binding is enclosed in curly braces. As with interpolation, property binding is also one-way binding.