In this lecture, we're going to explore a feature called property binding to manipulate attributes
on an element.
So far, we've learned how to output data Angular provides us with interpolation for rendering data
from a components class.
This feature is not the only option at our disposal for manipulating the document.
Attribute values can be tied to properties from our class.
This feature is known as property binding.
Through this feature, we can do some exciting things.
For example, our attributes can store values from our component class.
Let's give that a try.
We will continue working in the app component class.
Inside this class, we will create a property called image URL with the value of a link to an image.
If you want to link to this image, check out the resource section of this lecture.
We are going to dynamically load this image in the browser.
It's a common type of action you may perform in a regular web app.
In some cases, you may not be able to load an image immediately.
Therefore, you won't be able to set the source attribute to a valid image URL.
Images may be given to you from an external resource, such as an API.
After receiving the image, we may want to load it in the documents.
Angular allows us to modify a templates attributes with a feature called property binding.
Property binding is being able to change the document with properties from a class.
If a property in our class changes, Angular will update the document with the new value.
This is the change detection system I mentioned in the last section.
Angular will automatically watch our properties for change.
Those changes are communicated throughout our app.
We can apply property binding to any attribute in our documents.
Let's try using property binding to load our image.
Switch over to the app template file.
Above the other tags, let's add an image tag.
Next, we're going to add these source attributes.
We combined a property to this attribute by surrounding it with square brackets.
The syntax for a property binding is the attribute name surrounded by square brackets during the change
detection phase, angular processes are templates.
During this process, we saw an example of how it processed our template for rendering the name.
If Angular comes across an attribute with square brackets, it'll process the attribute before rendering
V components templates.
The value of the attribute is treated as an expression that's important to note down.
The value of this attribute is no longer static.
It's interpreted as an expression.
Whatever value is evaluated from, the expression will be used as fair value for the attribute.
Let's set this attribute to the image URL property from our class.
We have access to their property and methods in our class, Angular will bridge the gap between the
templates and class.
Let's check out the app in the browser.
The image should be a puppy.
Awesome.
The feature we're using is called property binding.
It allows us to apply properties from a class to an attribute value.
Big component class in template are tied together.
In the next lecture, we're going to learn how to update the image with event binding.