1
00:00:00,180 --> 00:00:05,670
In this lecture, we are going to talk about the energy template element for understanding structural

2
00:00:05,670 --> 00:00:07,440
directives under the hood.

3
00:00:07,620 --> 00:00:13,770
Angular relies on the energy template element for rendering content manipulated by a structural directive.

4
00:00:14,130 --> 00:00:17,010
It's a special element not recognized by the browser.

5
00:00:17,340 --> 00:00:22,410
The purpose of the nji template element is to store one or more elements in memory.

6
00:00:22,620 --> 00:00:24,330
Let's explore what that means.

7
00:00:24,720 --> 00:00:28,380
For this example, we will need to open the app template file.

8
00:00:31,070 --> 00:00:34,970
At the top of the file, we will and the energy template elements.

9
00:00:37,440 --> 00:00:41,220
Next, let's insert a paragraph element with some text.

10
00:00:41,550 --> 00:00:44,570
The text will allow the user to know if the button is blue.

11
00:00:47,110 --> 00:00:52,810
There's one thing to understand about this element Angular will not display the contents of this element

12
00:00:52,810 --> 00:00:53,590
in the browser.

13
00:00:53,830 --> 00:00:57,880
It'll detect we have an energy template element and immediately hide it.

14
00:00:58,210 --> 00:01:02,350
The contents of the template will be stored in memory, a.k.a. a variable.

15
00:01:02,620 --> 00:01:05,710
We can verify this behavior by switching to the browser.

16
00:01:08,210 --> 00:01:10,250
As you can see, the message is gone.

17
00:01:10,490 --> 00:01:14,000
That leads us to the question why does angular hide this element?

18
00:01:14,210 --> 00:01:21,020
In some cases, we may not want to display content immediately and said we may want to render content

19
00:01:21,020 --> 00:01:22,250
based on a condition.

20
00:01:22,610 --> 00:01:28,520
We need a way to tell angular which pieces of content should be conditionally rendered by wrapping the

21
00:01:28,520 --> 00:01:31,070
content with the nji template element.

22
00:01:31,250 --> 00:01:35,780
Angular will not render the content, but still be aware of it in its place.

23
00:01:35,930 --> 00:01:39,020
The content will be replaced with an HTML comment.

24
00:01:39,350 --> 00:01:41,000
Let's open the elements panel.

25
00:01:41,030 --> 00:01:42,440
Any developer tools?

26
00:01:44,890 --> 00:01:52,000
Inside the app components, we will find a comment that says Container Angular has generated this comment.

27
00:01:52,180 --> 00:01:54,070
It is a temporary placeholder.

28
00:01:54,370 --> 00:02:00,070
If we decide to render the content angular will add our content next to this comment.

29
00:02:00,430 --> 00:02:03,790
The next step is to render the content based on a condition.

30
00:02:04,150 --> 00:02:06,760
This is where structural directives come into play.

31
00:02:07,030 --> 00:02:10,419
We will handle rendering our content in the next lecture.