Property Binding

Like interpolation, property binding is one way binding from class property to the template.

Now, we'll display the image in our table using Property Binding method. Here is the code:
<img [src]='product.imageUrl'>

where,
[src] means Element Property
'product.imageUrl' means template expression

The above code is similar to using interpolation like:
<img src={{product.imageUrl}}>

but it is better to use Property Binding method than Interpolation method. If you have to add interpolation in large url then use interpolation method. Eg:

<img src='http://openclipart.org/{{product.imageUrl}}'>

We can also add width or margin or any other property depending on our need. Our final code for an application would look like this


where, we have added custom width and margin using its property name.

Share this

Related Posts