1
00:00:04,270 --> 00:00:10,450
Hello, everyone, and welcome back in this lesson, we're going to cover the engy container angular

2
00:00:10,450 --> 00:00:11,530
core directive.

3
00:00:11,530 --> 00:00:18,130
So far we have been using several angular structural directives, such as, for example, NGF or Engy

4
00:00:18,180 --> 00:00:19,050
Switch case.

5
00:00:19,240 --> 00:00:25,360
Now, so far we have here cleared parent elements onto which to apply these directives.

6
00:00:25,540 --> 00:00:27,230
This is not always the case.

7
00:00:27,250 --> 00:00:33,640
We might find ourselves in a situation where, for example, our component does not have a top level

8
00:00:33,640 --> 00:00:39,410
element, such as, for example, the case here where we have a roofing wrapped around course Curth.

9
00:00:39,490 --> 00:00:45,910
It might happen that the component does not have one single parent element onto which we can apply our

10
00:00:45,910 --> 00:00:47,830
NGF in a similar way.

11
00:00:47,830 --> 00:00:55,640
Here in our engie switch example, we have here a parent, d'Hiv Anta, which we have a play engie,

12
00:00:55,870 --> 00:01:01,630
which we might not always be in the situation where we have a single parent element.

13
00:01:01,900 --> 00:01:07,540
We might even have the situation where we want to have here in save an energy switch case.

14
00:01:07,810 --> 00:01:15,880
Not only one element, meaning one deve with Gless category, but multiple elements inside a switch

15
00:01:15,880 --> 00:01:16,360
case.

16
00:01:16,360 --> 00:01:21,130
And there is not one single parent element that wraps the complete case.

17
00:01:21,220 --> 00:01:28,810
If we find ourselves in that situation, we might be tempted to add an extra divx to our component without

18
00:01:28,810 --> 00:01:34,810
any need for it other than to have a place to apply our NGF, something like this.

19
00:01:34,810 --> 00:01:37,720
We would take him here the if clause.

20
00:01:37,720 --> 00:01:44,560
We would apply it here to this parent container and inside it we will add here the multiple elements

21
00:01:44,560 --> 00:01:46,670
which are part of our component.

22
00:01:46,720 --> 00:01:53,020
Now we don't have to create these extra wrapper elements just to apply a structural directive.

23
00:01:53,140 --> 00:01:59,690
We can instead use the energy that contain that directive that is available via angular core.

24
00:01:59,830 --> 00:02:07,180
So this is the wrapping container element onto which we can apply a structural directive so we can always

25
00:02:07,180 --> 00:02:12,620
use energy containers as sort of a template hook for applying this type of directives.

26
00:02:12,820 --> 00:02:15,990
The same goes here at the level of energy switch.

27
00:02:16,030 --> 00:02:23,980
So if by some reason we don't have here a div onto which to apply our energy switch directive, we can

28
00:02:23,980 --> 00:02:26,590
also add here an energy container.

29
00:02:26,740 --> 00:02:34,630
We can apply our energy switch directly here in our energy container and in save energy container.

30
00:02:34,630 --> 00:02:37,180
We can place anything that we want.

31
00:02:37,180 --> 00:02:43,690
So any value template element, the same goes here at the level of the category classes.

32
00:02:43,870 --> 00:02:51,240
In this case, we can apply here our energy switch case directive directly here in the category div,

33
00:02:51,250 --> 00:02:58,370
but we can alternatively apply our energy switch case close on top of an energy container.

34
00:02:58,570 --> 00:03:04,330
Let's for example, move the energy switch case close here to our energy container.

35
00:03:04,390 --> 00:03:12,010
And let's move here to the beginner category inside our container and let's try this out to see if everything

36
00:03:12,010 --> 00:03:14,210
is working still just like before.

37
00:03:14,230 --> 00:03:16,380
So as you can see, that is indeed the case.

38
00:03:16,390 --> 00:03:19,830
Our functionality is still working as expected.

39
00:03:20,230 --> 00:03:26,650
So if you ever find yourself in a situation where you don't have any convenient place to apply a strict

40
00:03:26,790 --> 00:03:33,250
directive, instead of creating an extra element such as a div just for being able to apply that directive,

41
00:03:33,250 --> 00:03:39,970
let's using stealth energy container, because these will not create extra DOM elements and this will

42
00:03:39,970 --> 00:03:42,700
help to keep our PS more lightweight.

43
00:03:42,700 --> 00:03:47,380
And with these we have covered the angular core energy container directive.

44
00:03:47,740 --> 00:03:52,690
We are now going to introduce a new angular feature, Angular Pipes.