Menu
I am trying to make an example of property binding in Angular. I decided to take an image and then put all 3 attributes of it -- width, height, src by property binding. To my surprise, though there was no error, and image is being rendered by URL (no error in url) but still the width and height are being rendered as zero (0). Why this? As far as I know Image takes height and width as its properties. Then where is the problem?
abc.component.html
//This does not work - gives height:0px, width:0px
<img [width]="'100px'" [height]="'100px'" [src]="'./assets/img/hermione.jpg'">
//This works - renders image, with height:100px, width: 100px
<img width="100px" height="100px" [src]="'./assets/img/hermione.jpg'">
Can someone explain by the strange behavior of why the second scenario runs well, but in first though images gets rendered but never seen (as height:0px, width:0px)?
Error:
Also, (as per Pronoy Sarkar - see answer below)
//This also works
<img [attr.width]="'100px'" [attr.height]="'100px'" [src]="'./assets/img/hermione.jpg'">
Now, question is why simple [height] and [width] does not work? Afterall, we never did [attr.src]?
347
Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components.
In property binding, we only specify the element between brackets. But in the case of attribute binding, it starts with the prefix attar, followed by a dot (.), and the name of the attribute. You then bind the attribute value using an expression that resolves to a string.
Binding to a single stylelink To create a single style binding, use the prefix style followed by a dot and the name of the CSS style. Angular sets the property to the value of the bound expression, which is usually a string. Optionally, you can add a unit extension like em or % , which requires a number type.
Property binding uses the [] syntax for data binding.
Try [attr.width] and [attr.height]
97
If you have a look at the Attribute List here on HTML attribute reference - Attribute List Page on MDN, it says that width and height are attributes and NOT Native Properties.
If you then go over to Attribute Binding section of Template Syntax Fundamentals Section, it states that:
As the message says, the element does not have a colspan property. It has the "colspan" attribute, but interpolation and property binding can set only properties, not attributes.
You need attribute bindings to create and bind to such attributes.
On the similar lines, width and height aren't Native Properties of an img tag. They are attributes.
Hence you can't set width and height using the property binding syntax([width]/[height]). You'll have to use the Attribute Binding Syntax instead.
PS: src was also present in the Attribute List Page on MDN page. But since in the description, there wasn't a mention of it as a property, I figured it was a native property.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
