1
00:00:03,940 --> 00:00:05,840
Hello, everyone, and welcome back.

2
00:00:06,040 --> 00:00:09,460
In these lessons, we're going to talk about component inputs.

3
00:00:09,730 --> 00:00:15,500
So as we have seen in the last lesson we know have here free instances of the Coast Guard component.

4
00:00:15,730 --> 00:00:20,790
All this text here is the same and the image is also the same.

5
00:00:20,980 --> 00:00:27,280
We would like to give to each course, guard a different title and image and let's see where we could

6
00:00:27,280 --> 00:00:28,930
get the data for that.

7
00:00:29,290 --> 00:00:37,120
If you open here our angular course root repository and then open here the source folder, you're going

8
00:00:37,120 --> 00:00:40,980
to see that there is a typescript file here called DB Data.

9
00:00:40,990 --> 00:00:47,410
That's if we click on it, we're going to see that it contains here a series of courses.

10
00:00:47,410 --> 00:00:52,330
So each of these JavaScript objects that we see here corresponds to a given course.

11
00:00:52,570 --> 00:01:00,130
Let's see, how can you use this to bring to the screen one course card for each of the elements that

12
00:01:00,130 --> 00:01:00,870
we have here?

13
00:01:01,150 --> 00:01:06,610
The first thing that we have to do is to make the data available to the template.

14
00:01:06,730 --> 00:01:13,690
The template consumes data that is available here at the level of the component as a member variable.

15
00:01:13,720 --> 00:01:20,320
So let's say that we are going to define here a variable called courses that is going to contain a few

16
00:01:20,320 --> 00:01:23,510
of the courses here available in this array.

17
00:01:23,560 --> 00:01:27,700
Let's say that we want to take the courses, number one, number two.

18
00:01:27,700 --> 00:01:33,470
And number three, we can make this data available at the level of the application component so that

19
00:01:33,470 --> 00:01:39,020
we can add it to the screen by adding member variables here at the level of this component.

20
00:01:39,160 --> 00:01:42,550
Let's say that we want to make available the data for this course.

21
00:01:42,550 --> 00:01:50,830
Then we define here a variable called core course and we assign it the first element of the courses

22
00:01:50,830 --> 00:01:53,850
array who can do the same for a couple of other courses.

23
00:01:54,190 --> 00:01:59,560
Let's define here, for example, one for our guests and the other for end.

24
00:02:00,520 --> 00:02:03,100
So here we have free member variables.

25
00:02:03,100 --> 00:02:08,570
Define any of these member variables are available for being used here at the level of the template.

26
00:02:08,710 --> 00:02:09,669
Let's try these out.

27
00:02:09,669 --> 00:02:16,060
We are going to arrive here in H1 tag and we're going to use here the angular template interpolation

28
00:02:16,060 --> 00:02:21,730
syntax and we're going to try to access the description of the core cause.

29
00:02:21,910 --> 00:02:27,460
If we know relo of the application, we are going to see that indeed we are using here the title of

30
00:02:27,460 --> 00:02:28,390
the first course.

31
00:02:28,750 --> 00:02:34,300
If by some reason we would like to print instead of the title of the second course, we just have to

32
00:02:34,300 --> 00:02:37,830
use the second variable that we have defined here.

33
00:02:38,020 --> 00:02:43,870
If we replace core course with our discourse and reload our application, we are going to see that now.

34
00:02:43,870 --> 00:02:48,690
We have the title of the second course here in our courses array.

35
00:02:48,850 --> 00:02:55,780
So as you can see, in order to be able to use some data in our template, we need to first assign it

36
00:02:55,780 --> 00:02:59,130
to a member variable at the level of a component.

37
00:02:59,230 --> 00:03:05,150
If we do not do that first, then the data will not be visible here at the level of the template.

38
00:03:05,200 --> 00:03:10,000
Now, instead of printing out here, the description of the first course that we would like to do is

39
00:03:10,000 --> 00:03:14,230
to pass the description as an input of the Coast Guard component.

40
00:03:14,570 --> 00:03:16,340
We would like to do something like this.

41
00:03:16,410 --> 00:03:21,880
I would like to define here a custom input property called title and inside it.

42
00:03:21,880 --> 00:03:27,460
Somehow we would like to pass in here the arrogance course description.

43
00:03:27,550 --> 00:03:34,600
As we have seen before, the angular syntax for inputs is the square brackets syntax.

44
00:03:34,930 --> 00:03:43,240
So D says to Angular that the content here inside these double quotes is to be interpreted as a JavaScript

45
00:03:43,240 --> 00:03:48,910
expression that is going to be evaluated in the context of the application component.

46
00:03:49,210 --> 00:03:54,490
Now the question is how to add these input properties title to the course curve.

47
00:03:54,820 --> 00:04:01,280
We can do so by defining here a member variable, which will be a string at the level of the course

48
00:04:01,310 --> 00:04:02,170
curve component.

49
00:04:02,320 --> 00:04:08,350
And we want to annotated with angular core input decorated this way.

50
00:04:08,380 --> 00:04:13,900
Angular will note that this is an input property of the course card element.

51
00:04:14,050 --> 00:04:18,490
With this in place, we are now passing in here the description of the course.

52
00:04:18,730 --> 00:04:25,420
What we want to do now is to use the title here at the level of the course card components template.

53
00:04:25,570 --> 00:04:30,990
In order to do that, we do the same as we were doing here in our application component.

54
00:04:31,030 --> 00:04:33,130
We are going to use here the ANGULAR.

55
00:04:33,130 --> 00:04:40,780
There will clearly be syntax for interpolating here an expression and we are going to access here the

56
00:04:40,870 --> 00:04:47,020
title property that is present here in the context of the course of component class.

57
00:04:47,260 --> 00:04:48,490
So let's try this out.

58
00:04:48,490 --> 00:04:55,000
If we now reload our application, we are going to see that for the first car that we have defined here

59
00:04:55,330 --> 00:04:59,410
in our list of cards we still have here the are.

60
00:04:59,770 --> 00:04:59,940
Yes.

61
00:04:59,950 --> 00:05:00,420
In practice.

62
00:05:00,580 --> 00:05:05,980
His course description, actually, I wanted to pass in here the of course.

63
00:05:06,620 --> 00:05:08,110
So let's quickly fix that.

64
00:05:08,320 --> 00:05:12,120
We will lower the application and we can see that we have here the correct title.

65
00:05:12,490 --> 00:05:16,630
The other two cards, however, are not displaying anything.

66
00:05:16,870 --> 00:05:23,770
And this is because the title property for these two other cards has not been defined.

67
00:05:23,950 --> 00:05:30,060
So this means that each of the course card components has its own data scope.

68
00:05:30,070 --> 00:05:37,690
There is an instance of the cost curve component for each of the courses here we have the title with

69
00:05:37,690 --> 00:05:41,020
this value, but here these value is not defined.

70
00:05:41,030 --> 00:05:43,080
So we have here an empty string.

71
00:05:43,330 --> 00:05:47,530
Let's now change here, our template and parsing here.

72
00:05:47,530 --> 00:05:54,060
The other course descriptions we are going to add here in the second card, the title of the RSG is

73
00:05:54,070 --> 00:05:54,610
Course.

74
00:05:54,790 --> 00:05:59,710
And here we are going to pass in the title of the engineering course.

75
00:06:00,010 --> 00:06:05,990
And now by reloading here our cards, we can see that we have the titles as expected.

76
00:06:06,040 --> 00:06:10,680
First the core div, then are exchanges and then indirects.

77
00:06:10,960 --> 00:06:16,700
Now the next thing that we would like to do is to change the course image for each of the cards.

78
00:06:16,720 --> 00:06:22,690
So we would like to pass to the component, the second property here, the icon Eurail.

79
00:06:23,080 --> 00:06:29,050
We will also like to change here the long description of the course so that it corresponds to the text

80
00:06:29,050 --> 00:06:29,920
that we have here.

81
00:06:30,160 --> 00:06:36,190
So one way of doing it would be to pass to this card component to extra properties.

82
00:06:36,190 --> 00:06:41,680
We would go here to the course card component and we will have here a couple of new properties.

83
00:06:42,070 --> 00:06:43,840
We're going to do this in a different way.

84
00:06:44,140 --> 00:06:52,030
We are going to instead pass as an input to the card component, the complete course object in one go

85
00:06:52,030 --> 00:06:54,210
with all its properties.

86
00:06:54,400 --> 00:07:00,610
For that, we are going to be using here a type definition that you will find here in the model folder.

87
00:07:00,940 --> 00:07:07,330
If you open the course, the file you and see that we have here a very simple interface defined that

88
00:07:07,330 --> 00:07:09,540
defines a course type.

89
00:07:09,910 --> 00:07:16,150
This is a very practical way of defining custom JavaScript object types in a type safe way.

90
00:07:16,180 --> 00:07:21,520
As we will see, this is going to give us auto completion at the level of our component classes and

91
00:07:21,520 --> 00:07:23,530
even at the level of the template.

92
00:07:23,770 --> 00:07:31,350
Right now we want to refactor our course card component to take as input instead of only the course

93
00:07:31,390 --> 00:07:31,900
title.

94
00:07:32,170 --> 00:07:39,830
We want to take as input a complete course object that we are going to import here from the model folder.

95
00:07:40,000 --> 00:07:46,990
Now, moving to the template of our course car component, this variable here is no longer present in

96
00:07:46,990 --> 00:07:48,940
the course card component class.

97
00:07:49,100 --> 00:07:58,090
Instead, we have available the course object so we can now access the title of the course by auto completing

98
00:07:58,090 --> 00:08:00,250
here the property that we want.

99
00:08:00,250 --> 00:08:06,370
We have here all the properties available at the level of the template and we can now choose here because

100
00:08:06,370 --> 00:08:12,400
that description, the same way that we have printed here, the description of the course, we can also

101
00:08:12,400 --> 00:08:14,530
access here the course image.

102
00:08:14,680 --> 00:08:20,650
So the source of this image is no longer going to be here and hardcoded value.

103
00:08:20,740 --> 00:08:22,860
Instead, we are going to pass it.

104
00:08:22,870 --> 00:08:25,480
The value of the course image.

105
00:08:25,720 --> 00:08:30,940
We want to again access the course object and we're going to see that in our autocomplete list we have

106
00:08:30,940 --> 00:08:37,840
available that I can you l property in a very similar way, using an interpolation expression.

107
00:08:37,870 --> 00:08:43,169
We are going to be able to pass in here the long description of the course.

108
00:08:43,390 --> 00:08:50,050
Now in order to view the free courses on the screen, all we have to do is go back here to our application

109
00:08:50,050 --> 00:08:56,470
component template and instead of filling in the title property, we are going to instead of filling

110
00:08:56,470 --> 00:09:03,820
the court property for each of the courses for the first car that we want to pass in the caucus for

111
00:09:03,820 --> 00:09:08,650
the second hour discourse and for the for the indirect course.

112
00:09:08,860 --> 00:09:14,950
If we now try this out, we are going to see that our data is being correctly displayed as expected

113
00:09:14,950 --> 00:09:21,590
as we can see the input syntax with square brackets for passing input data to a custom component.

114
00:09:21,730 --> 00:09:29,050
It's exactly the same syntax that we use for defining a property of a standard HTML element, such as,

115
00:09:29,050 --> 00:09:30,910
for example, an image tag.

116
00:09:31,210 --> 00:09:34,130
The syntax is consistent in both cases.

117
00:09:34,570 --> 00:09:41,740
Next, what we are going to cover is component outputs, how to generate custom events from our custom

118
00:09:41,740 --> 00:09:42,520
components.