1
00:00:00,270 --> 00:00:05,700
In this lecture, we're going to explore a feature called property binding to manipulate attributes

2
00:00:05,700 --> 00:00:06,570
on an element.

3
00:00:06,840 --> 00:00:13,410
So far, we've learned how to output data Angular provides us with interpolation for rendering data

4
00:00:13,410 --> 00:00:14,880
from a components class.

5
00:00:15,150 --> 00:00:19,950
This feature is not the only option at our disposal for manipulating the document.

6
00:00:20,520 --> 00:00:24,000
Attribute values can be tied to properties from our class.

7
00:00:24,270 --> 00:00:26,820
This feature is known as property binding.

8
00:00:27,150 --> 00:00:30,120
Through this feature, we can do some exciting things.

9
00:00:30,390 --> 00:00:35,130
For example, our attributes can store values from our component class.

10
00:00:35,340 --> 00:00:36,600
Let's give that a try.

11
00:00:36,840 --> 00:00:40,110
We will continue working in the app component class.

12
00:00:42,560 --> 00:00:49,310
Inside this class, we will create a property called image URL with the value of a link to an image.

13
00:00:51,740 --> 00:00:56,160
If you want to link to this image, check out the resource section of this lecture.

14
00:00:56,420 --> 00:00:59,810
We are going to dynamically load this image in the browser.

15
00:01:00,110 --> 00:01:03,770
It's a common type of action you may perform in a regular web app.

16
00:01:04,040 --> 00:01:07,910
In some cases, you may not be able to load an image immediately.

17
00:01:08,150 --> 00:01:13,550
Therefore, you won't be able to set the source attribute to a valid image URL.

18
00:01:14,090 --> 00:01:18,420
Images may be given to you from an external resource, such as an API.

19
00:01:18,800 --> 00:01:22,520
After receiving the image, we may want to load it in the documents.

20
00:01:22,880 --> 00:01:28,850
Angular allows us to modify a templates attributes with a feature called property binding.

21
00:01:29,360 --> 00:01:34,400
Property binding is being able to change the document with properties from a class.

22
00:01:34,790 --> 00:01:40,610
If a property in our class changes, Angular will update the document with the new value.

23
00:01:40,910 --> 00:01:44,870
This is the change detection system I mentioned in the last section.

24
00:01:45,260 --> 00:01:48,920
Angular will automatically watch our properties for change.

25
00:01:49,250 --> 00:01:52,220
Those changes are communicated throughout our app.

26
00:01:52,730 --> 00:01:56,930
We can apply property binding to any attribute in our documents.

27
00:01:57,230 --> 00:02:00,770
Let's try using property binding to load our image.

28
00:02:01,070 --> 00:02:03,650
Switch over to the app template file.

29
00:02:06,170 --> 00:02:09,530
Above the other tags, let's add an image tag.

30
00:02:12,050 --> 00:02:15,200
Next, we're going to add these source attributes.

31
00:02:17,680 --> 00:02:22,360
We combined a property to this attribute by surrounding it with square brackets.

32
00:02:24,830 --> 00:02:31,310
The syntax for a property binding is the attribute name surrounded by square brackets during the change

33
00:02:31,310 --> 00:02:34,860
detection phase, angular processes are templates.

34
00:02:35,180 --> 00:02:41,180
During this process, we saw an example of how it processed our template for rendering the name.

35
00:02:41,630 --> 00:02:48,410
If Angular comes across an attribute with square brackets, it'll process the attribute before rendering

36
00:02:48,410 --> 00:02:49,940
V components templates.

37
00:02:50,300 --> 00:02:56,150
The value of the attribute is treated as an expression that's important to note down.

38
00:02:56,540 --> 00:02:59,780
The value of this attribute is no longer static.

39
00:03:00,080 --> 00:03:02,180
It's interpreted as an expression.

40
00:03:02,570 --> 00:03:08,850
Whatever value is evaluated from, the expression will be used as fair value for the attribute.

41
00:03:09,170 --> 00:03:13,790
Let's set this attribute to the image URL property from our class.

42
00:03:16,360 --> 00:03:22,390
We have access to their property and methods in our class, Angular will bridge the gap between the

43
00:03:22,390 --> 00:03:23,800
templates and class.

44
00:03:24,070 --> 00:03:26,190
Let's check out the app in the browser.

45
00:03:28,810 --> 00:03:30,250
The image should be a puppy.

46
00:03:30,550 --> 00:03:31,090
Awesome.

47
00:03:31,420 --> 00:03:34,330
The feature we're using is called property binding.

48
00:03:34,630 --> 00:03:39,340
It allows us to apply properties from a class to an attribute value.

49
00:03:39,760 --> 00:03:42,850
Big component class in template are tied together.

50
00:03:43,150 --> 00:03:48,190
In the next lecture, we're going to learn how to update the image with event binding.