1
00:00:04,030 --> 00:00:06,070
Hello, everyone, and welcome back.

2
00:00:06,310 --> 00:00:11,370
In this lesson, we're going to talk about a new structural directive in angular code.

3
00:00:11,620 --> 00:00:19,420
This is the NGF directive that is useful for conditionally displaying or hiding from the user certain

4
00:00:19,420 --> 00:00:20,470
parts of the page.

5
00:00:20,770 --> 00:00:26,020
Let's give a concrete example for these very commonly used functionality, for example, here at the

6
00:00:26,020 --> 00:00:27,160
level of our course.

7
00:00:27,560 --> 00:00:31,660
We can see that every course that we are displaying here has an image.

8
00:00:31,930 --> 00:00:39,160
And this is because here in our DB data file, all the courses belonging to this array have an icon

9
00:00:39,170 --> 00:00:43,810
URL property that is being used here to display the image.

10
00:00:44,230 --> 00:00:51,240
Now, imagine what would happen if one of these courses would not have here an icon URL property.

11
00:00:51,400 --> 00:00:57,010
Let's remove the icon Eurail property from the first course and reload the application.

12
00:00:57,280 --> 00:00:59,050
And now take a look at what happens.

13
00:00:59,290 --> 00:01:06,000
We have here the browser symbol for a broken image and we have here an alternative text for the image.

14
00:01:06,130 --> 00:01:12,610
The reason why we are getting displayed here, this text with a broken image is because we are defining

15
00:01:12,610 --> 00:01:19,130
here an old property in our cursor component, and this contains the text being displayed.

16
00:01:19,510 --> 00:01:24,670
Then these broken image that we see here, this is standard browser functionality.

17
00:01:24,850 --> 00:01:30,340
The browser will display these whenever the source property is not correctly filled in.

18
00:01:30,700 --> 00:01:36,160
What we would like to do in this situation is instead of displaying here this broken image, we would

19
00:01:36,160 --> 00:01:41,650
prefer to hide the image completely and replace it with something else.

20
00:01:41,920 --> 00:01:45,980
And this would happen depending on the presence of the icon.

21
00:01:46,120 --> 00:01:51,340
Are property the expression that we pass to Engy if works in the following way.

22
00:01:51,550 --> 00:01:57,780
If the expression is evaluated to true, then we are going to see that the elements onto which we are

23
00:01:57,780 --> 00:02:02,640
applying NGF in this case, the image will still be present on the screen.

24
00:02:02,650 --> 00:02:09,310
But if this expression evaluates to false instead, then the image is going to get hidden.

25
00:02:09,490 --> 00:02:12,220
As we can see, that image is no longer present.

26
00:02:12,220 --> 00:02:19,540
And if we expect here our application, we are going to see that not only the image is hidden, but

27
00:02:19,540 --> 00:02:23,010
it was instead completely removed from the page.

28
00:02:23,020 --> 00:02:28,030
So there is no hidden HTML element here that is still present on the page.

29
00:02:28,140 --> 00:02:29,430
Even with Cyesis.

30
00:02:29,440 --> 00:02:36,820
What happens here with NGF is that the content is completely removed from the DOM from the page itself.

31
00:02:37,000 --> 00:02:41,410
Notice that we don't have to pass in the values, true or false, to NGF.

32
00:02:41,410 --> 00:02:44,800
We can instead pass any JavaScript expression.

33
00:02:44,830 --> 00:02:50,890
We can also pass here a reference to course that I can Eurail, which is a string and not a boolean,

34
00:02:51,040 --> 00:02:53,410
and it can potentially be undefined.

35
00:02:53,530 --> 00:03:00,730
But even though this is a string and not a boolean, the NGF structural directive is going to coerce

36
00:03:00,730 --> 00:03:02,450
this value into a boolean.

37
00:03:02,530 --> 00:03:09,370
So in this case, the value undefined of this first angular Cordie there, of course, is going to cost

38
00:03:09,370 --> 00:03:11,070
the image to be hidden.

39
00:03:11,500 --> 00:03:16,870
So this expression here in the case of this crosscourt is getting evaluated to false because a..

40
00:03:16,870 --> 00:03:23,190
Neutral is undefined and for all other courses in the list because we have an icon Eurail property defined,

41
00:03:23,230 --> 00:03:26,830
these NGF expression is going to be evaluated to true.

42
00:03:27,010 --> 00:03:30,140
And so the image will be displayed on the card.

43
00:03:30,280 --> 00:03:34,110
We don't have to pass only booleans or strings to engy.

44
00:03:34,120 --> 00:03:40,930
If we could potentially pass an object and if the object is undefined, then it would be evaluated to

45
00:03:40,930 --> 00:03:44,580
force any other object would be evaluated to true.

46
00:03:44,620 --> 00:03:47,500
We can also pass in here a function call.

47
00:03:47,740 --> 00:03:52,720
For example, we can create here a new method call image visible.

48
00:03:52,900 --> 00:03:59,080
This method needs to be available here at the level of our components and from here we can return a

49
00:03:59,080 --> 00:04:04,200
boolean to the template indicating if the image should be visible or not.

50
00:04:04,210 --> 00:04:11,930
In this case, we would say that the image is visible if the course property is defined and if the course

51
00:04:11,950 --> 00:04:16,230
property has an icon, you are l property also defined.

52
00:04:16,360 --> 00:04:22,750
So as you can see, if we reload here the page, we can see that the same logic is still working as

53
00:04:22,750 --> 00:04:23,410
expected.

54
00:04:23,530 --> 00:04:30,520
Let's give another example of how to use engy if let's say that we have here in our least, of course

55
00:04:30,530 --> 00:04:33,790
is an undefined object here at the beginning.

56
00:04:34,120 --> 00:04:40,790
So by some reason this data here is not available, but it was accidentally passed on to our view.

57
00:04:40,990 --> 00:04:43,750
Let's see what problem would this cause?

58
00:04:43,780 --> 00:04:49,360
So now if we reload the application, we can see that it looks like everything is broken now.

59
00:04:49,570 --> 00:04:55,150
And if we check here on the console we have here, the error message cannot reach property description

60
00:04:55,150 --> 00:04:56,470
of undefined.

61
00:04:56,740 --> 00:05:00,010
And here is the name of the component that is causing the issue.

62
00:05:00,610 --> 00:05:07,150
The Coast Guard component, and we can see that it's these expression here course, the description

63
00:05:07,330 --> 00:05:09,530
that is causing the problem to occur.

64
00:05:09,880 --> 00:05:16,180
So the problem is that we are passing in the value end defined here to the input course.

65
00:05:16,420 --> 00:05:19,300
And then this value is being accessed here.

66
00:05:19,330 --> 00:05:25,360
Using the standard JavaScript dot notation for accessing properties, of course, is undefined.

67
00:05:25,360 --> 00:05:29,180
So course the description is going to cause this effort here.

68
00:05:29,530 --> 00:05:35,160
One way of avoiding this situation will be to use what we call the Elvis operator.

69
00:05:35,410 --> 00:05:42,130
We simply add here at Questionmark evaluation of the property and then we're going to see that somehow

70
00:05:42,130 --> 00:05:44,340
the results are slightly different.

71
00:05:44,350 --> 00:05:46,490
We have here a different error message.

72
00:05:46,810 --> 00:05:51,130
Now, the problem is here at the level of the long description property.

73
00:05:51,130 --> 00:05:52,390
So we can fix that.

74
00:05:52,630 --> 00:05:59,050
And now we have here a running program where we have here an initial care that is displaying incorrect

75
00:05:59,050 --> 00:05:59,470
values.

76
00:05:59,470 --> 00:06:02,980
But still, at least the program is not crashing.

77
00:06:03,160 --> 00:06:09,970
And we have here our the day where the image is absent because the neutral properties are defined.

78
00:06:10,180 --> 00:06:13,720
And here we have the other cards that are working correctly.

79
00:06:13,810 --> 00:06:19,240
Now, what we would like to do here is to avoid the use of the Elvis operator in multiple places of

80
00:06:19,240 --> 00:06:25,570
the template, because if the course is not available, then it really doesn't make sense to try to

81
00:06:25,570 --> 00:06:26,890
display the course card.

82
00:06:27,250 --> 00:06:34,390
So what we are going to do here is we are going to guard against this error scenario by using the NGF

83
00:06:34,390 --> 00:06:35,170
directive.

84
00:06:35,500 --> 00:06:38,710
Let's apply here NGF and let's simply pass it.

85
00:06:38,740 --> 00:06:40,270
The course object.

86
00:06:40,390 --> 00:06:44,800
If the object is already defined, then the card is going to be displayed.

87
00:06:45,010 --> 00:06:53,320
On the other hand, if the object is not available, then due to the NGF directive, this whole section

88
00:06:53,320 --> 00:06:58,290
here is going to get hidden and we will no longer see here this incorrect result.

89
00:06:58,570 --> 00:07:01,900
Let's have a look at this in action after refreshing the application.

90
00:07:01,930 --> 00:07:08,680
You can see that now that initial undefined Caird has been hidden and we are instead displaying directly

91
00:07:08,680 --> 00:07:13,950
the second element of the array, the angular core Dave course as expected.

92
00:07:14,080 --> 00:07:21,700
So what we can see by adding here NGF if at the level of the outer container of our component, we have

93
00:07:21,730 --> 00:07:29,080
avoided the use here of the Elvis operator to avoid undefined errors and other commonly used feature

94
00:07:29,080 --> 00:07:31,490
of NGF ezan else clause.

95
00:07:31,510 --> 00:07:37,060
So let's say that we don't have here an image to display to the user, but we would like to show to

96
00:07:37,060 --> 00:07:44,500
the user something else that just for example, a small amount of text that says that no image is available.

97
00:07:44,530 --> 00:07:47,200
We can do that by using here and else close.

98
00:07:47,200 --> 00:07:49,330
We simply have here and else.

99
00:07:49,330 --> 00:07:55,550
And then we need to pass in here a reference to a template block that is going to contain our message.

100
00:07:55,810 --> 00:07:58,510
So let's create here a template block.

101
00:07:58,510 --> 00:08:04,230
We are going to do that using engie template and we are going to give this template block and name.

102
00:08:04,240 --> 00:08:06,630
We are going to call it no image.

103
00:08:06,640 --> 00:08:11,960
So we are using here the template reference hash syntax that we have seen before.

104
00:08:12,030 --> 00:08:18,230
We're going to take here our message and we are going to based it here inside the template block.

105
00:08:18,760 --> 00:08:25,030
Now we are going to take this template reference, no image, and we're going to have it here in our

106
00:08:25,060 --> 00:08:26,080
else clause.

107
00:08:26,290 --> 00:08:29,190
Let's now quickly see this logic in action.

108
00:08:29,230 --> 00:08:35,409
We are going to refresh the application and we're going to see that we have here the no images available

109
00:08:35,409 --> 00:08:42,130
message displayed on the screen, but only in the case of the first card where no image is available

110
00:08:42,250 --> 00:08:43,720
in the remainder of the cards.

111
00:08:43,720 --> 00:08:46,980
We are correctly displaying the image as expected.

112
00:08:46,990 --> 00:08:52,630
And with this we have covered NGF, which is one of the most commonly used directive's in ANGULAR.

113
00:08:52,780 --> 00:08:57,910
Next, we're going to talk about the engie class and engy style directives that we are going to be using

114
00:08:57,910 --> 00:09:00,460
for styling our angular components.