1
00:00:03,640 --> 00:00:05,570
Hello, everyone, and welcome back.

2
00:00:05,950 --> 00:00:10,590
In this lesson, we're going to introduce the Angular Energy Switch Core Directive.

3
00:00:10,720 --> 00:00:18,370
So as we have seen, we can conditionally add or remove elements to a page if using the NGF core, their

4
00:00:18,370 --> 00:00:25,510
active energy is useful in the case when we want to add the element to the page, depending on a condition

5
00:00:25,510 --> 00:00:26,830
or we want to remove it.

6
00:00:26,860 --> 00:00:29,380
So there are only two possibilities.

7
00:00:29,380 --> 00:00:33,880
But there are many other cases where we have more than these two possibilities.

8
00:00:33,880 --> 00:00:40,090
For example, here in the case of the category property of its course, let's say that we want to add

9
00:00:40,090 --> 00:00:45,300
here a label that identifies if the course is beginner, intermediate or advanced.

10
00:00:45,310 --> 00:00:51,320
Let's see how Energy Switch is going to help us to create here a category label just above here, the

11
00:00:51,320 --> 00:00:52,530
view course button.

12
00:00:52,960 --> 00:00:58,660
So we are going to go here to our template and here just below the course description.

13
00:00:58,690 --> 00:01:04,390
We are going to add here a new div and we are going to add the science class course category.

14
00:01:04,569 --> 00:01:09,250
Now, inside this container, we are going to add the category itself.

15
00:01:09,400 --> 00:01:14,430
The category is going to be simply a div, which is going to have the class category.

16
00:01:14,560 --> 00:01:17,770
Let's add here the beginner category, for example.

17
00:01:17,780 --> 00:01:23,890
So if we now try this out, we are going to see that the beginner tag is being added to all the courses.

18
00:01:24,310 --> 00:01:30,490
Instead of adding these to every course, we want to add these depending on the value of the course

19
00:01:30,490 --> 00:01:31,180
category.

20
00:01:31,660 --> 00:01:33,220
We can do that in the following way.

21
00:01:33,220 --> 00:01:36,750
We are going to apply here the energy switch directive.

22
00:01:36,770 --> 00:01:42,330
So this is going to work in a similar way to a JavaScript switch statement.

23
00:01:42,670 --> 00:01:49,030
We are going to choose the expression onto which we want to switch on, which is going to be the course

24
00:01:49,030 --> 00:01:50,470
category itself.

25
00:01:50,470 --> 00:01:56,980
And then depending on the value of the category, we are going to show or not here the beginner category.

26
00:01:57,000 --> 00:02:02,680
So one of the cases that we want to show is indeed the beginner category, and we are going to identify

27
00:02:02,680 --> 00:02:04,670
that via a case clause.

28
00:02:04,930 --> 00:02:12,010
We are going to adhere to the engy switch case structural directive here with the Asterisk Syntex.

29
00:02:12,250 --> 00:02:19,810
This case is going to be considered active if the value of this expression, because that category is

30
00:02:19,810 --> 00:02:21,370
identical to begin.

31
00:02:21,970 --> 00:02:25,750
So in this case, we are going to be showing this label.

32
00:02:25,900 --> 00:02:32,170
If we not try this out, we are going to see that only the courses that are beginner courses have the

33
00:02:32,170 --> 00:02:34,150
beginning of tag as expected.

34
00:02:34,300 --> 00:02:39,150
We also want to add here, for example, the case of intermediate courses.

35
00:02:39,160 --> 00:02:45,850
So we are going to have here the matching expression intermediate and we are going to fix here our label.

36
00:02:46,270 --> 00:02:53,290
So if we try this out, we are going to see that now certain courses get applied here, the intermediate

37
00:02:53,290 --> 00:02:56,320
tag and the same goes for the advanced tag.

38
00:02:56,320 --> 00:03:01,690
So we want to add here a further possibility, advanced courses.

39
00:03:01,690 --> 00:03:07,150
So if we try this out, we are going to see that in the certain courses now have here the advanced tag

40
00:03:07,300 --> 00:03:14,380
that we also want to cover the possibility when the course category expression does not match any of

41
00:03:14,380 --> 00:03:15,550
the known cases.

42
00:03:15,790 --> 00:03:20,500
In that case, we want to write the category all levels.

43
00:03:20,530 --> 00:03:26,640
We can do that by applying the following directive, the end speech, default structural directive.

44
00:03:26,650 --> 00:03:32,920
So in order to see that all levels, we are going to have to go here to our DV data file that contains

45
00:03:32,920 --> 00:03:34,300
the data that we are displaying.

46
00:03:34,480 --> 00:03:40,170
And let's, for example, go to the first course and remove here the category property.

47
00:03:40,210 --> 00:03:46,180
So if we now try this out, we are going to see that indeed we have here the all level stack displayed

48
00:03:46,450 --> 00:03:47,480
as expected.

49
00:03:47,500 --> 00:03:54,160
So as you can see, the main difference between Engy Switch and NGF is that here with Engy Switch,

50
00:03:54,160 --> 00:04:00,830
we can cover multiple alternative cases very easily and we can even provide the default keys.

51
00:04:00,880 --> 00:04:05,500
This is unlike NGF, where we really only have two possibilities.

52
00:04:05,710 --> 00:04:09,910
And with this we have covered the multiple options available with Engy Switch.

53
00:04:10,210 --> 00:04:14,680
Let's not talk about another very commonly used angular core directive.

54
00:04:14,950 --> 00:04:16,180
Engy contain it.