In this lecture, we are going to talk about the energy template element for understanding structural
directives under the hood.
Angular relies on the energy template element for rendering content manipulated by a structural directive.
It's a special element not recognized by the browser.
The purpose of the nji template element is to store one or more elements in memory.
Let's explore what that means.
For this example, we will need to open the app template file.
At the top of the file, we will and the energy template elements.
Next, let's insert a paragraph element with some text.
The text will allow the user to know if the button is blue.
There's one thing to understand about this element Angular will not display the contents of this element
in the browser.
It'll detect we have an energy template element and immediately hide it.
The contents of the template will be stored in memory, a.k.a. a variable.
We can verify this behavior by switching to the browser.
As you can see, the message is gone.
That leads us to the question why does angular hide this element?
In some cases, we may not want to display content immediately and said we may want to render content
based on a condition.
We need a way to tell angular which pieces of content should be conditionally rendered by wrapping the
content with the nji template element.
Angular will not render the content, but still be aware of it in its place.
The content will be replaced with an HTML comment.
Let's open the elements panel.
Any developer tools?
Inside the app components, we will find a comment that says Container Angular has generated this comment.
It is a temporary placeholder.
If we decide to render the content angular will add our content next to this comment.
The next step is to render the content based on a condition.
This is where structural directives come into play.
We will handle rendering our content in the next lecture.