1
00:00:03,670 --> 00:00:05,750
Hello, everyone, and welcome back.

2
00:00:05,890 --> 00:00:11,650
In this lesson, we're going to start the implementation of our energy and unless Kissam structural

3
00:00:11,650 --> 00:00:17,290
directive, so as we have seen on the previous lesson, one of the key features of a structural directive

4
00:00:17,290 --> 00:00:22,380
when compared to a plane attribute directive is the ability to instantiate a template.

5
00:00:22,540 --> 00:00:28,380
So the first thing that this directive is going to need is to grab a reference here to this template.

6
00:00:28,390 --> 00:00:33,860
We can do so by directly injecting this template here in our constructor.

7
00:00:34,000 --> 00:00:40,660
So if we declare here a variable that we are going to name template Raef, this is going to be a programmatic

8
00:00:40,660 --> 00:00:42,430
reference to our template.

9
00:00:42,580 --> 00:00:48,520
With this variable, we're going to be able to instantiate the template somewhere on this directive.

10
00:00:48,520 --> 00:00:53,980
Now that we have here a reference to the template, we're going to need a mechanism for instantiating

11
00:00:53,980 --> 00:00:54,180
it.

12
00:00:54,200 --> 00:00:59,610
Let's remember that the template by itself will not render these e-mails here.

13
00:00:59,740 --> 00:01:02,820
We need a way to instantiate the template.

14
00:01:02,920 --> 00:01:09,310
So in order to do that, we are going to inject here another angular built in service, which is called

15
00:01:09,310 --> 00:01:10,750
the view container.

16
00:01:10,990 --> 00:01:14,860
The view container is of type view container Araf.

17
00:01:14,860 --> 00:01:21,280
And if we expect here the API of this service where we can see that we have here to create embedded

18
00:01:21,280 --> 00:01:24,450
view method that takes a template to reference.

19
00:01:24,490 --> 00:01:30,040
This is the call that we are going to be doing to our view container to instantiate the template on

20
00:01:30,040 --> 00:01:33,560
the mend now that we have the template and the container.

21
00:01:33,580 --> 00:01:39,180
What we need to grab next is a reference to the condition being applied to our directive.

22
00:01:39,340 --> 00:01:43,800
Let's quickly apply the engie access and less directive here.

23
00:01:43,930 --> 00:01:49,510
So we are going to apply it here and we are going to see that this image is only going to be visible

24
00:01:49,510 --> 00:01:52,650
if the course icon URL is available.

25
00:01:52,660 --> 00:01:58,150
So in order to do that, we are going to passing the course that I can use Worrill expression and we're

26
00:01:58,150 --> 00:01:59,260
going to negate it.

27
00:01:59,260 --> 00:02:05,470
The way that we can read this condition is we are always going to display the course image to the user

28
00:02:05,560 --> 00:02:10,160
unless the icon URL property is not present.

29
00:02:10,330 --> 00:02:16,160
Let's then see how the engie access, unless active can grab a reference here to this condition.

30
00:02:16,330 --> 00:02:21,970
The first thing that we have to do is to bear in mind that the same engie template syntax is getting

31
00:02:21,970 --> 00:02:22,870
applied here.

32
00:02:22,930 --> 00:02:28,900
So what is happening with the use of this type of syntax is that we are creating an energy template

33
00:02:28,900 --> 00:02:33,250
that inside contains only the energy analyst directive.

34
00:02:33,250 --> 00:02:39,910
And we are grabbing here this condition and we are applying it here as a natural directive at the level

35
00:02:39,910 --> 00:02:40,980
of the templates.

36
00:02:40,990 --> 00:02:47,140
So we are going to apply here the energy axis and less attribute directive and we are going to pass

37
00:02:47,140 --> 00:02:53,620
in here the condition which in this case is to confirm the absence of the Akinyele property.

38
00:02:53,650 --> 00:02:59,770
So this is a property like any other input property, like the course property that we have here on

39
00:02:59,770 --> 00:03:01,050
the card component.

40
00:03:01,120 --> 00:03:07,150
So the way that we are going to pass it to energy access and less is via an input property.

41
00:03:07,390 --> 00:03:14,080
Now, we can add here a property that is called energy access and less annotated with an input.

42
00:03:14,140 --> 00:03:19,470
But instead of doing that, we are going to receive the property via a setar method.

43
00:03:19,480 --> 00:03:21,650
So we are going to declare here a center.

44
00:03:21,760 --> 00:03:25,440
We are going to give it the exact same name as the property.

45
00:03:25,480 --> 00:03:27,300
Otherwise this will not work.

46
00:03:27,310 --> 00:03:32,360
And we are going to annotate this letter with the input decorator.

47
00:03:32,560 --> 00:03:38,770
Now, here is the single argument on this set that we are going to receive the condition which at this

48
00:03:38,770 --> 00:03:41,740
point is already evaluated to a boolean.

49
00:03:41,890 --> 00:03:48,340
At this point here in our Satyamev, we have everything that we need to implement the main logic of

50
00:03:48,340 --> 00:03:49,150
the directive.

51
00:03:49,150 --> 00:03:52,420
We have the condition that we know if it's true or false.

52
00:03:52,450 --> 00:03:58,120
We have the template and we have a way of instantiating the template if the condition is false.

53
00:03:58,180 --> 00:04:04,210
So let's go ahead and instantiate the template we have here and if condition and we are going to see

54
00:04:04,330 --> 00:04:09,910
if the condition is false, then in that case, let's instantiate the template.

55
00:04:09,910 --> 00:04:12,460
We are going to do that using our view container.

56
00:04:12,490 --> 00:04:18,570
We are going to create an embedded view and we're going to be seen as a reference, our template.

57
00:04:18,579 --> 00:04:25,960
So with these, we are creating here a new template here in the place of these engie template tag.

58
00:04:25,990 --> 00:04:31,210
So here is the part of the DOM where the template is going to be instantiated.

59
00:04:31,210 --> 00:04:36,460
Noticed that I accidentally forgot to copy here the course image closing tag.

60
00:04:36,470 --> 00:04:40,390
So let's do that right now and go back here to our implementation.

61
00:04:40,420 --> 00:04:42,870
So this is the case when the condition is false.

62
00:04:42,940 --> 00:04:48,820
Now we are going to have here the other case, which is what happens if the condition is true.

63
00:04:48,820 --> 00:04:54,940
Then in that case, with this directive, what we want to do is we want to remove the template from

64
00:04:54,940 --> 00:04:59,020
the screen, and we can do that by calling the view container again.

65
00:04:59,020 --> 00:05:00,250
And then we have to.

66
00:05:00,550 --> 00:05:06,340
The clear method this is going to remove anything that we might have instantiated in the container by

67
00:05:06,340 --> 00:05:11,300
calling creating better view, and with this our implementation is almost completed.

68
00:05:11,410 --> 00:05:17,980
Notice at this point that this better method is going to get called directly by ANGULAR and it might

69
00:05:17,980 --> 00:05:21,730
get cold even if the view is already in place.

70
00:05:21,740 --> 00:05:26,980
We don't know how many times this method is going to get called by the framework itself.

71
00:05:27,010 --> 00:05:31,240
So we want to add here some precaution to avoid creating the view.

72
00:05:31,240 --> 00:05:38,020
Again, if the view has already been created the same way, we want to avoid calling clear if the view

73
00:05:38,020 --> 00:05:39,500
has already been cleared.

74
00:05:39,530 --> 00:05:45,520
So we are going to have here a new flag that is going to help us to avoid those situations.

75
00:05:45,670 --> 00:05:51,250
We are then going to create here a flag that we are going to call visible and we are going to initialize

76
00:05:51,250 --> 00:05:52,360
it to foal's.

77
00:05:52,390 --> 00:06:00,010
Now here on our condition, we are going to create here the view and display the image to the user if

78
00:06:00,010 --> 00:06:02,190
the view is not yet visible.

79
00:06:02,200 --> 00:06:09,810
So let's add that condition here in our if close, we are going to negate the visible flag this way.

80
00:06:09,940 --> 00:06:16,540
This is only going to get cold if this flag is set to falls in the same way here in our elesclomol.

81
00:06:16,540 --> 00:06:21,160
We also want to avoid calling this if the view has already been clear.

82
00:06:21,160 --> 00:06:25,480
So let's start by calling this only if the condition is true.

83
00:06:25,480 --> 00:06:30,520
And we are going to add here that the view needs to be currently visible.

84
00:06:30,670 --> 00:06:36,940
Now, here in the if part of our condition, we are going to set the visible flag to draw.

85
00:06:37,030 --> 00:06:40,360
This is because the view is now visible on the same way.

86
00:06:40,360 --> 00:06:45,850
Whenever we clear the view, we are going to set here the visible flag to false.

87
00:06:45,850 --> 00:06:49,900
And with this, we have finished the implementation of our structural directive.

88
00:06:49,900 --> 00:06:53,320
Let's go back here to our template before we try this out.

89
00:06:53,320 --> 00:06:59,350
Let's remember that here our course card component, the way that it's currently implemented, is looking

90
00:06:59,350 --> 00:07:03,190
for a coarse image tag here inside the content part.

91
00:07:03,190 --> 00:07:10,900
So we need to apply here the standard syntax of SGX, unless otherwise this would not work.

92
00:07:10,900 --> 00:07:17,410
So I'm going to remove here that engie template, extended syntax, and I'm going to apply here.

93
00:07:17,410 --> 00:07:24,430
The staff, Syntex, this way, the query that the course card is making for finding a coarse image

94
00:07:24,430 --> 00:07:31,360
here in the content part of the course tag is going to find the coarse image and the image is going

95
00:07:31,360 --> 00:07:34,900
to get projected here on the screen while all this is happening.

96
00:07:34,900 --> 00:07:38,860
The end, unless logic is still going to be applied.

97
00:07:39,040 --> 00:07:40,450
Let's now try this out.

98
00:07:40,450 --> 00:07:45,700
If we reload here, our application, we are going to see that the image is still getting displayed

99
00:07:45,700 --> 00:07:46,750
here on the screen.

100
00:07:46,750 --> 00:07:50,290
But what happens if we now set this condition to true?

101
00:07:50,290 --> 00:07:54,770
If we try this out, we are going to see that now the image is getting hidden.

102
00:07:54,790 --> 00:07:59,670
So our end and less logic is working correctly, as expected.

103
00:07:59,800 --> 00:08:04,300
As you can see, it's very simple to create an angular custom structural directive.

104
00:08:04,300 --> 00:08:11,770
We just have to create a normal standard attribute directive and have the view container and the template

105
00:08:11,770 --> 00:08:14,320
reference injected into our direct.

106
00:08:14,470 --> 00:08:20,890
From there, we can add or remove the inject the template into the DOM depending on any condition.

107
00:08:20,890 --> 00:08:26,440
You could use this, for example, for showing or having certain elements of the page, depending on

108
00:08:26,440 --> 00:08:28,920
the security roles of a given user.

109
00:08:28,930 --> 00:08:33,220
And with this we have concluded the directive section of our course.

110
00:08:33,460 --> 00:08:35,559
Let's not start a brand new section.

111
00:08:35,559 --> 00:08:41,919
We are going to talk about the angular view encapsulation mechanism and in general, how to style angular

112
00:08:41,919 --> 00:08:42,730
components.