1
00:00:00,510 --> 00:00:05,400
In this lecture, we're going to render our image inside the post components.

2
00:00:05,670 --> 00:00:08,280
We have a couple of options at our disposal.

3
00:00:08,520 --> 00:00:12,390
We can move the template and properties to the post component.

4
00:00:12,720 --> 00:00:15,780
Alternatively, we can move just the templates.

5
00:00:16,110 --> 00:00:20,070
The URL for the image can be left inside the app component.

6
00:00:20,370 --> 00:00:24,150
Instead, we can feed the post component the image.

7
00:00:24,720 --> 00:00:25,890
Why would we do this?

8
00:00:26,160 --> 00:00:29,130
Our goal should be to develop reusable components.

9
00:00:29,430 --> 00:00:32,369
For example, let's say we're developing a blog.

10
00:00:32,610 --> 00:00:34,930
If our blog has hundreds of posts.

11
00:00:35,160 --> 00:00:39,750
Would you rather create a component for every post or a single component?

12
00:00:40,080 --> 00:00:42,750
I bet you would want to create a single component.

13
00:00:42,990 --> 00:00:47,940
It's much more efficient instead of hard coding data into a component.

14
00:00:48,120 --> 00:00:52,290
We can create components to accept data from a parent component.

15
00:00:52,710 --> 00:00:59,400
The post component can allow the parent component to tell it what image to render by sending the image

16
00:00:59,400 --> 00:01:00,420
to the component.

17
00:01:00,600 --> 00:01:04,470
We can reuse the post component with different images.

18
00:01:04,920 --> 00:01:09,960
The responsibility of supplying the image will be the job of the parent component.

19
00:01:10,380 --> 00:01:16,080
If we hard code the image inside the post component, the same image will get rendered.

20
00:01:16,710 --> 00:01:21,600
Angular makes it super easy to pass down data from component to component.

21
00:01:21,960 --> 00:01:23,070
Let's get started.

22
00:01:23,340 --> 00:01:24,750
Open the app template.

23
00:01:24,990 --> 00:01:27,090
We're going to cut the image tag.

24
00:01:29,590 --> 00:01:32,620
Next, switch over to the post template.

25
00:01:35,220 --> 00:01:37,350
We will paste in the image tag.

26
00:01:39,770 --> 00:01:41,540
The editor will throw an error.

27
00:01:41,840 --> 00:01:47,240
It tells us the image URL property does not exist in the post component class.

28
00:01:47,600 --> 00:01:53,390
This is important to understand we don't have access to properties in other classes.

29
00:01:53,750 --> 00:01:57,710
Templates have limited scope to the class they are associated with.

30
00:01:58,280 --> 00:02:04,490
We should tell angular this property should come from the parent component before we move on.

31
00:02:04,670 --> 00:02:08,000
I want to rename the property to post image.

32
00:02:10,690 --> 00:02:13,290
This step is optional, in my opinion.

33
00:02:13,330 --> 00:02:18,190
I think it would be confusing if we have the same property names in different classes.

34
00:02:18,460 --> 00:02:24,640
By renaming the properties, it should give us clarity as to which property belongs to which class.

35
00:02:24,940 --> 00:02:29,320
The property will be called post image in the post component.

36
00:02:29,680 --> 00:02:34,240
In the app components, the property name will remain image URL.

37
00:02:34,720 --> 00:02:36,820
They will both hold the same value.

38
00:02:37,000 --> 00:02:39,550
Let's open the post component class.

39
00:02:42,110 --> 00:02:48,860
Inside this class, we will add the post image property with an initial value of an empty string.

40
00:02:51,540 --> 00:02:54,600
The property will be initialized with an empty string.

41
00:02:55,050 --> 00:03:00,690
The goal is to update this property with the value passed down by the parent component.

42
00:03:01,110 --> 00:03:02,790
This is where things get tricky.

43
00:03:03,120 --> 00:03:06,960
Angular will prevent external code from changing this property.

44
00:03:07,260 --> 00:03:10,500
It can only be configured from within this class.

45
00:03:11,130 --> 00:03:12,120
That's a good thing.

46
00:03:12,360 --> 00:03:17,910
We don't want to allow other classes to change their properties in this class without permission.

47
00:03:18,240 --> 00:03:20,550
It's the default behavior of angular.

48
00:03:20,820 --> 00:03:27,150
However, in this specific case, we want to permit other components to set this property.

49
00:03:27,510 --> 00:03:34,350
We can tell Angular to permit parent components by adding a decorator and the import statement for the

50
00:03:34,350 --> 00:03:36,120
angular core package.

51
00:03:36,360 --> 00:03:40,650
We're going to update the list by adding a decorator called input.

52
00:03:43,360 --> 00:03:45,730
The input function is a decorator.

53
00:03:45,940 --> 00:03:49,880
Interestingly, decorators are not limited to classes.

54
00:03:50,380 --> 00:03:52,510
They can be applied to properties.

55
00:03:52,750 --> 00:03:59,860
The syntax is the exact same decorators can be applied to properties by adding them before the property

56
00:03:59,860 --> 00:04:00,250
name.

57
00:04:00,610 --> 00:04:03,490
Let's apply it to the post image property.

58
00:04:06,170 --> 00:04:09,320
We are calling the input decorator as a function.

59
00:04:09,590 --> 00:04:13,740
We don't need to pass in configuration options to this decorator.

60
00:04:14,120 --> 00:04:17,480
After adding this decorator, we're ready for the last step.

61
00:04:17,810 --> 00:04:25,370
We need to add the post component to the app components template before we do take special note of the

62
00:04:25,370 --> 00:04:29,120
selector property in the components configuration settings.

63
00:04:29,510 --> 00:04:32,720
The selector for this component is app post.

64
00:04:33,080 --> 00:04:40,640
By default, Angular will prefix our component selector names with the word app is considered good practice

65
00:04:40,640 --> 00:04:42,230
to prefix selectors.

66
00:04:42,560 --> 00:04:50,420
This prefix prevents our custom components from clashing with default HTML tags back in the app template.

67
00:04:50,570 --> 00:04:53,240
We are going to add the app post component.

68
00:04:55,740 --> 00:05:00,930
We can write components in other components as long as they're registered with the same module.

69
00:05:01,350 --> 00:05:04,770
The app component is an importing the post component.

70
00:05:05,040 --> 00:05:10,830
It doesn't have two components declared within the same module are accessible to one another.

71
00:05:11,190 --> 00:05:14,910
It's one of the many benefits of using angular as module system.

72
00:05:15,240 --> 00:05:22,590
We can centralize our imports into one file instead of across several after adding this component.

73
00:05:22,650 --> 00:05:24,960
We can start passing on the image.

74
00:05:25,290 --> 00:05:29,900
Believe it or not, we can reuse a feature we learned in an earlier lecture.

75
00:05:30,210 --> 00:05:33,570
Passing down data can be accomplished through property.

76
00:05:33,570 --> 00:05:38,730
Binding properties can be configured through attributes on a component tag.

77
00:05:39,090 --> 00:05:44,760
The attributes name must be the same name as the property in the class, accepting the data.

78
00:05:45,030 --> 00:05:49,500
In this example, the name of the property is called post image.

79
00:05:52,050 --> 00:05:59,580
The post image attribute should be set to the image URL property by default, attribute values are not

80
00:05:59,580 --> 00:06:01,410
processed as expressions.

81
00:06:01,710 --> 00:06:05,610
Luckily, Angular supports property binding on components.

82
00:06:05,820 --> 00:06:08,760
Let's wrap this property with square brackets.

83
00:06:09,030 --> 00:06:13,080
The attributes value will be set to the image URL property.

84
00:06:15,640 --> 00:06:16,480
We're finished.

85
00:06:16,690 --> 00:06:20,410
If we did everything right, the image should appear in the browser.

86
00:06:20,560 --> 00:06:22,150
Let's refresh the page.

87
00:06:24,660 --> 00:06:31,410
The images appearing awesome, we were able to communicate data between components, which is necessary

88
00:06:31,410 --> 00:06:36,960
for any app data can flow from a parent component to a child components.

89
00:06:37,260 --> 00:06:42,870
We will continue learning about data flow in components in the next set of lectures.