1
00:00:03,969 --> 00:00:06,040
Hello, everyone, and welcome back.

2
00:00:06,310 --> 00:00:12,040
In these Lessel, we're going to present the angular energy for core directive, as we have seen on

3
00:00:12,040 --> 00:00:15,950
the previous lesson, we have here several course cards displayed.

4
00:00:16,210 --> 00:00:19,780
We have here a certain level of repetition in the template.

5
00:00:19,780 --> 00:00:27,350
We have this free tax here and we are adding here, for example, the exact same custom event handler.

6
00:00:27,460 --> 00:00:34,750
It would be much better to simply loop through a list of courses and apply only one core stack in our

7
00:00:34,750 --> 00:00:39,490
template, especially because our data is already available in an array.

8
00:00:39,760 --> 00:00:43,830
This will also simplify here our application component.

9
00:00:43,960 --> 00:00:50,270
So let's start refactoring this and use the engie for DirecTV for presenting our list of courses.

10
00:00:50,320 --> 00:00:55,450
The first thing that we are going to do is we are going to make the courses array available here.

11
00:00:55,570 --> 00:01:01,330
We are going to make available to the template not only these free courses, but we are actually going

12
00:01:01,330 --> 00:01:04,250
to present the complete list of courses.

13
00:01:04,450 --> 00:01:11,470
So imagine what it would be if here we will have somewhere between seven and 10 courses here in this

14
00:01:11,470 --> 00:01:12,090
template.

15
00:01:12,100 --> 00:01:14,210
It will be very repetitive.

16
00:01:14,260 --> 00:01:16,300
Let's then continue to refactor here.

17
00:01:16,300 --> 00:01:17,320
Our component.

18
00:01:17,330 --> 00:01:23,440
We have added here a variable called courses, which contains the complete courses list, and we can

19
00:01:23,440 --> 00:01:27,450
now go ahead and remove these free variables that we were using here.

20
00:01:27,880 --> 00:01:34,060
So we are no longer going to refer to the courses one by one with separate member variables.

21
00:01:34,420 --> 00:01:41,200
Instead, what we're going to do is we are going to use the angular energy for structural directive

22
00:01:41,200 --> 00:01:43,840
in order to loop through the list of courses.

23
00:01:44,050 --> 00:01:49,010
And here is the syntax for Engy for we are going to start here with the style.

24
00:01:49,210 --> 00:01:55,270
This is a shorthand syntax for structural that activates which we will be covering in detail later in

25
00:01:55,270 --> 00:01:55,960
this course.

26
00:01:56,140 --> 00:02:02,350
A structural directive such as the name implies allows us to change the structure of the page based

27
00:02:02,350 --> 00:02:04,640
here on a JavaScript expression.

28
00:02:04,870 --> 00:02:10,930
So in this case, we want to pass in here an expression that will loop through a list of courses.

29
00:02:11,080 --> 00:02:14,980
The looping expression is identical to plain JavaScript.

30
00:02:15,130 --> 00:02:21,940
This is the same expression that we would use when looping through a collection in TypeScript Engy four

31
00:02:21,940 --> 00:02:28,300
is going to create the local course loop variable that is going to contain each of the courses being

32
00:02:28,330 --> 00:02:28,810
looped.

33
00:02:29,080 --> 00:02:37,490
Now we can take these variable here and we can pass it as the input of the course card system HTML element.

34
00:02:37,510 --> 00:02:41,800
Let's then see energy for inaction after refreshing the application.

35
00:02:41,800 --> 00:02:48,190
If we scroll down, we are going to see that not only we have here the first free cards, but notice

36
00:02:48,190 --> 00:02:51,010
here there are more cards available.

37
00:02:51,010 --> 00:02:57,030
So all the elements of the courses array are being displayed on the screen.

38
00:02:57,040 --> 00:03:05,170
So we have here a directive that allows us to generate new components by looping through a data array

39
00:03:05,170 --> 00:03:12,670
available at the level of our component if we click into the courses array available on the DB data

40
00:03:12,670 --> 00:03:13,250
file.

41
00:03:13,270 --> 00:03:17,190
So this is just a test data that we are using to build our program.

42
00:03:17,200 --> 00:03:23,290
We are going to see that indeed all the courses in this file are being displayed here on the screen

43
00:03:23,380 --> 00:03:29,630
besides the core iteration functionality and for also comes with some additional features.

44
00:03:29,740 --> 00:03:34,400
Let's start with the first auxiliary feature, which is going to be the index feature.

45
00:03:34,510 --> 00:03:38,320
So let's say that we want to add here no to the course.

46
00:03:38,320 --> 00:03:44,800
We would like to number the courses from one up until the last sequential number of the course.

47
00:03:45,160 --> 00:03:47,520
We can do that very easily in the following way.

48
00:03:47,680 --> 00:03:54,220
We are going to here a semicolon after the letter of syntax and we are going to access here the index

49
00:03:54,220 --> 00:04:01,060
built-In variable that is provided by Engy for DirecTV and we are actually going to rename it so that

50
00:04:01,060 --> 00:04:04,000
we can use it easily here in our template.

51
00:04:04,120 --> 00:04:11,140
We are going to pass in here an alternative name to our index, which is simply going to be called the

52
00:04:11,140 --> 00:04:12,420
E variable.

53
00:04:12,430 --> 00:04:19,630
Now we need to somehow pass the current index of the card to the cause itself and we're going to do

54
00:04:19,630 --> 00:04:24,460
that using here a new input parameter that we are about to create.

55
00:04:24,730 --> 00:04:30,970
We are going to call this index parameter carrer the index, then we are going to pass it the value

56
00:04:30,970 --> 00:04:37,510
E plus one because e e zero based E starts at zero one, two, etc..

57
00:04:37,510 --> 00:04:41,940
So we are adding here plus one, we move here into the card.

58
00:04:42,010 --> 00:04:44,920
We are going to create here another input.

59
00:04:45,100 --> 00:04:50,800
We are going to call it kind of index like we did in the previous template, and we're going to declare

60
00:04:50,800 --> 00:04:52,910
it as being of Type No.

61
00:04:52,930 --> 00:04:59,950
Next, we are going to go here to our template and just before here, the course description, we are

62
00:04:59,950 --> 00:05:00,430
going to.

63
00:05:00,530 --> 00:05:07,040
I have here the card index we are going to append here space and we are going to concatenate here the

64
00:05:07,040 --> 00:05:13,160
course description, if we reload these, we are going to see that indeed we have here the numerical

65
00:05:13,160 --> 00:05:21,410
value, one to free, etc. all the way up until then, Engie four also provides us a couple of extra

66
00:05:21,410 --> 00:05:22,140
features.

67
00:05:22,160 --> 00:05:29,000
So not only we have here access to the index of the current element that is being looped, but we also

68
00:05:29,000 --> 00:05:34,680
have access to the information if this element is the first element on the list or not.

69
00:05:34,700 --> 00:05:42,400
So first is a variable provided by Engy for that will be true only for the case of the first card,

70
00:05:42,410 --> 00:05:50,480
and we can rename it using the syntax to something like, for example is first we can now use is first

71
00:05:50,480 --> 00:05:54,560
to have a special style here to the first card of the least.

72
00:05:54,560 --> 00:05:59,480
For example, in order to add a style to the first class card of the least, we are going to be using

73
00:05:59,480 --> 00:06:01,610
the following template syntax.

74
00:06:01,910 --> 00:06:08,750
We are going to continue to use the angular input properties syntax in square braces and we are going

75
00:06:08,750 --> 00:06:13,490
to access the class variable of this DOM element.

76
00:06:13,610 --> 00:06:19,940
The class property is going to contain the least of the asset classes apply to these HTML element.

77
00:06:20,150 --> 00:06:24,560
So we are going to be adding here to the list of success classes of this element.

78
00:06:24,710 --> 00:06:32,810
The class is that first, this is a Cyesis class that is going to arrive here, a top border only to

79
00:06:32,810 --> 00:06:34,460
the first card of the list.

80
00:06:34,730 --> 00:06:36,760
The class is available here and there.

81
00:06:36,770 --> 00:06:43,760
The source assets folder we have here, styles, dot, cyesis, file, and if we open this file, we

82
00:06:43,760 --> 00:06:49,940
are going to see that we have here a course candidate is first class that is applying here.

83
00:06:49,940 --> 00:06:54,530
A couple of simple styles to our first class of the list.

84
00:06:54,530 --> 00:06:59,210
Using this class, we can now use it here at the level of the template.

85
00:06:59,240 --> 00:07:05,630
We are going to say that we want to apply that is first class in all cases of the list.

86
00:07:05,640 --> 00:07:12,590
So we have to provide here a boolean expression that is going to be true if we want to apply the E first

87
00:07:12,590 --> 00:07:14,660
Cyesis class to the cost curve.

88
00:07:14,870 --> 00:07:19,250
And it should be false if we don't want to add this class to the element.

89
00:07:19,430 --> 00:07:25,460
If we try this out now, we are going to see that the class is first is being added to all the elements

90
00:07:25,460 --> 00:07:26,240
in the lists.

91
00:07:26,240 --> 00:07:31,910
Instead of applying this first class to all the elements in the list, we would like each state to apply

92
00:07:31,910 --> 00:07:34,370
this only to the first element.

93
00:07:34,400 --> 00:07:39,680
So for that, we are going to use the EAS first boolean variable that we have available here.

94
00:07:39,860 --> 00:07:47,360
And now this top border is only visible for the first card in the list in a very similar way to the

95
00:07:47,360 --> 00:07:48,730
first variable.

96
00:07:48,740 --> 00:07:55,460
We also have access to the last boolean variable and this variable works in a very similar way to E

97
00:07:55,460 --> 00:07:56,090
first.

98
00:07:56,090 --> 00:08:04,670
So let's apply here a class called E last, and this class will only be applied to the last element

99
00:08:04,670 --> 00:08:05,860
of our list.

100
00:08:05,900 --> 00:08:08,870
So it's very similar to the success that we have here.

101
00:08:08,870 --> 00:08:12,180
But we are applying a bottom border this time around.

102
00:08:12,200 --> 00:08:16,490
So if we try this out, can see that E first is still being applied here.

103
00:08:16,940 --> 00:08:22,940
But if we now scroll down here to the bottom of the list, we are going to see that here at the end.

104
00:08:23,300 --> 00:08:26,980
We have here the last card, of course, with the bottom border.

105
00:08:27,200 --> 00:08:33,840
And if we expect the card element here using the chrome dev tools, we are going to see that indeed

106
00:08:33,840 --> 00:08:36,350
the discourse card here is a success.

107
00:08:36,350 --> 00:08:41,460
Class E last in a very similar way to the first and last variables.

108
00:08:41,480 --> 00:08:44,970
We also have an even and odd variable pair.

109
00:08:45,140 --> 00:08:47,680
Let's quickly be clear here, the variables.

110
00:08:47,720 --> 00:08:55,290
So first we are going to declare even as is even and then we are going to declare all as is odd.

111
00:08:55,520 --> 00:09:01,790
Now we have these two variables available and we can apply them here to our template in a very similar

112
00:09:01,790 --> 00:09:02,140
way.

113
00:09:02,270 --> 00:09:09,200
So we have a Cyesis class is even that is only going to be applied if there is even variable set to

114
00:09:09,200 --> 00:09:09,730
true.

115
00:09:09,770 --> 00:09:15,740
And the equivalent is going to be then for the Cyesis is all that is only going to be applied to an

116
00:09:15,740 --> 00:09:18,390
element if the element is old.

117
00:09:18,500 --> 00:09:25,940
So these two classes is even and is all are simply going to apply a different color background to each

118
00:09:25,940 --> 00:09:26,820
of the cards.

119
00:09:27,020 --> 00:09:30,170
Let's have a look at these courses, classes in action.

120
00:09:30,530 --> 00:09:37,220
If we refresh the application, we can see that the even elements of our least have light gray background

121
00:09:37,220 --> 00:09:41,600
while the all elements have here a light Sien background.

122
00:09:41,810 --> 00:09:48,530
And these matches, the styles that we have here, as we can see, even elements are light gray and

123
00:09:48,530 --> 00:09:52,970
all the elements are light skin, just like we see here on the screen.

124
00:09:52,970 --> 00:09:59,090
And with these, we have covered all the auxillary features of engie for let's now cover another angular

125
00:09:59,090 --> 00:10:00,080
color directive.

126
00:10:00,080 --> 00:10:00,320
Where?

127
00:10:00,320 --> 00:10:00,450
When.

128
00:10:00,710 --> 00:10:06,560
How can we add or remove conditionally certain elements from the piece, we're going to be doing that

129
00:10:06,560 --> 00:10:09,290
using the NGF core directive.