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

2
00:00:06,370 --> 00:00:11,950
In this lesson, we're going to dive deeper into the angular core engie template called Directive.

3
00:00:11,960 --> 00:00:16,180
We have seen the energy template feature before when we cover the energy.

4
00:00:16,239 --> 00:00:22,930
If so, we are now going to get back to that feature and cover it in detail in order to explain engy

5
00:00:22,930 --> 00:00:23,520
template.

6
00:00:23,530 --> 00:00:26,690
Let's go back to the case when we first found it.

7
00:00:26,740 --> 00:00:31,690
So if you remember, we found the first occurrence of engie template whenever we were trying to provide

8
00:00:31,690 --> 00:00:37,580
here some alternative content to the image in case an image is not provided for a given cause.

9
00:00:37,690 --> 00:00:40,000
So what we were doing was something like this.

10
00:00:40,000 --> 00:00:47,260
We were using Engy if in order to detect if the cause has an icon, you are warrell property available.

11
00:00:47,260 --> 00:00:52,990
And if that's the case, we will be displaying here the coarse image that in this case we are projecting

12
00:00:52,990 --> 00:00:54,360
with energy content.

13
00:00:54,400 --> 00:01:01,180
However, if there is no course I can you warrell available, then we would like to display here a blank

14
00:01:01,180 --> 00:01:02,550
image template.

15
00:01:02,650 --> 00:01:06,190
And if you remember, the template would look something like these.

16
00:01:06,190 --> 00:01:11,890
We would use the tag engie template to define here a template segment.

17
00:01:11,920 --> 00:01:16,600
We will use a template reference to give this template segment a name.

18
00:01:16,630 --> 00:01:18,490
We are calling it blank image.

19
00:01:18,580 --> 00:01:21,370
And inside we are going to add here some content.

20
00:01:21,380 --> 00:01:28,390
For example, we are going to display here a warning to the user using the word Cyesis class that no

21
00:01:28,390 --> 00:01:30,250
image is available yet.

22
00:01:30,340 --> 00:01:34,230
And we are also going to display here a default image.

23
00:01:34,270 --> 00:01:40,160
So we are going to fill in here the source property and we are going to go inside the assets folder.

24
00:01:40,210 --> 00:01:46,870
We are going to take the image name, empty that image that and we're going to use it here in our energy

25
00:01:46,870 --> 00:01:47,530
template.

26
00:01:47,710 --> 00:01:50,280
Now, let's have a look at this functionality in action.

27
00:01:50,290 --> 00:01:54,060
So this is what happens if there is a coarse image available.

28
00:01:54,070 --> 00:01:56,620
So like before we have here the image.

29
00:01:56,650 --> 00:02:04,150
But if this time around we open here our DeVita file and we comment about the image for a given course,

30
00:02:04,150 --> 00:02:07,870
we are going to see that we have here applied the default content.

31
00:02:07,870 --> 00:02:09,669
No images available yet.

32
00:02:09,669 --> 00:02:12,070
And we have here the default image.

33
00:02:12,190 --> 00:02:18,790
Now, what is happening here is that we are referencing here a block of a template using a template

34
00:02:18,790 --> 00:02:23,500
reference any e-mail and access that is going to be filled in inside.

35
00:02:23,680 --> 00:02:27,370
The engie template is going to be part of this template segment.

36
00:02:27,550 --> 00:02:34,570
Now, notice what happens if we don't mention here the blank image template reference here in our else

37
00:02:34,570 --> 00:02:35,200
clause.

38
00:02:35,200 --> 00:02:41,710
What is going to happen is that the content of our energy template is no longer displayed anywhere on

39
00:02:41,710 --> 00:02:42,360
the page.

40
00:02:42,370 --> 00:02:45,540
So let's have a look at the e-mail to see what we have there.

41
00:02:45,580 --> 00:02:49,160
Let's inspect here the title and just below it.

42
00:02:49,170 --> 00:02:56,530
Let's see if we can find our energy template so we can see we can only find here the course description

43
00:02:56,530 --> 00:02:57,410
immediately.

44
00:02:57,520 --> 00:03:02,360
So there is no content between the title and the description.

45
00:03:02,380 --> 00:03:05,050
So it's like this block of code here.

46
00:03:05,050 --> 00:03:08,560
The engie template, for instance, does not exist.

47
00:03:08,560 --> 00:03:15,550
In our e-mail page, you can also see that the image is hidden, but that's because of the use of NGF

48
00:03:15,550 --> 00:03:17,250
and that is as expected.

49
00:03:17,350 --> 00:03:23,590
But it's a bit surprising that the contents of this e-mail block does not get displayed anywhere on

50
00:03:23,590 --> 00:03:24,180
the page.

51
00:03:24,250 --> 00:03:30,280
So the way that this works is that ANGULAR is going to inspect the template, is going to notice that

52
00:03:30,280 --> 00:03:36,490
there is a reference here to a template segment, but this template segment is not going to be added

53
00:03:36,490 --> 00:03:38,120
by default to the screen.

54
00:03:38,170 --> 00:03:45,130
This template segment is going to be kept by angular for later and it's going to be used only if we

55
00:03:45,130 --> 00:03:52,120
explicitly use it, either by using it here on the else close or in some other way that we are going

56
00:03:52,120 --> 00:03:53,450
to see in a moment.

57
00:03:53,560 --> 00:03:58,990
Right now, let's talk about what data is visible here inside the template tag.

58
00:03:59,110 --> 00:04:05,080
So the same data that is visible in the template that is surrounding it is also visible here.

59
00:04:05,080 --> 00:04:07,630
Inside Engie Template, for example.

60
00:04:07,660 --> 00:04:10,710
We can have access here to the course variable.

61
00:04:10,720 --> 00:04:16,870
We can say, for example, here in, say, M.G. template that course the description, the name of the

62
00:04:16,870 --> 00:04:19,149
course has no image yet.

63
00:04:19,149 --> 00:04:24,720
And as you can see, as we refresh the application we get here, the correct title of the course.

64
00:04:24,770 --> 00:04:29,510
So the course variable is indeed visible here inside of Engy template.

65
00:04:29,560 --> 00:04:35,440
Notice that although engie template can access variables such as course that belongs to the template

66
00:04:35,440 --> 00:04:42,310
where it's embedded, we can also have engie template create its own variable scope with its own private

67
00:04:42,310 --> 00:04:45,910
variables visible only inside the energy template tag.

68
00:04:45,970 --> 00:04:52,510
Let's quickly summarize what we have learned in this lesson, and the template allows us to define blocks

69
00:04:52,510 --> 00:04:56,440
of e-mail that correspond to a single isolated template.

70
00:04:56,680 --> 00:04:59,880
This code is not going to be displayed by default on the page.

71
00:04:59,890 --> 00:05:00,160
It's.

72
00:05:00,290 --> 00:05:06,440
Only going to be displayed if we use the template somewhere, we have to instantiate that template somehow

73
00:05:06,440 --> 00:05:13,280
in order for the content of the template to be visible, the template can see the variables of the context

74
00:05:13,280 --> 00:05:14,820
on which it's embedded.

75
00:05:14,840 --> 00:05:20,110
For example, our blank image engie template can see the coarse variable.

76
00:05:20,120 --> 00:05:26,180
Let's now alert and how can we instantiate a template and let's learn how can we give it its own private

77
00:05:26,180 --> 00:05:26,990
variables?

78
00:05:27,230 --> 00:05:29,870
This is coming right up in the next lesson.