In this lecture, we are going to dynamically render content with the NGF directive.
This directive is considered a structural directive.
A structural directive can add or remove elements from the document.
This is completely different from attribute directives, attribute directors or modify and attributes
appearance through attributes.
Whereas structural directives are more powerful, they can manipulate elements by adding or removing
them.
The NGF Directive works similarly to an if statement.
In JavaScript, it'll execute code if a condition is true.
In this case, we will display a piece of the template based on a condition.
Therefore, the NGF Directive is a structural directive.
We will continue working on the app template file.
Structural directives must be applied to any template elements.
Let's sand the NGF directive to the element.
Just like attribute directives, structural directives should be wrapped with square brackets for property
binding.
Otherwise, we won't be able to use an expression as a value.
So let's bind this directive to the blue class property.
As a reminder, this property will hold a Boolean value for determining if a class should be added to
a button.
We are going to be using the same condition if the button is blue.
The message should appear.
Let's check out the app in the browser.
If we pressed the button, the message appears in the developer tools, we can clearly see the elements,
the energy template element is not present in the document.
Angular will take care of removing the energy template element for us.
Thus, we don't have to worry about ruining the integrity of our document, which could lead to excess
errors.
We can continue to act as if it was never there.
However, it can be distracting to write in our templates.
We have to constantly write the nji templates element whenever we want to use a structural directive.
Luckily, we can avoid it altogether with shorthand syntax.
Switch back to the editor.
We're going to move the NGF directive from the energy templates element to the paragraph element.
Next, we will remove the nji template element.
Lastly, we will replace these square brackets with an asterisk character before the director of name.
This character can be added to structural directives.
It doesn't just apply to the NGF directive by adding this character, Angular will perform two actions.
First, it'll wrap the element with the energy template element.
Secondly, the value will be interpreted as an expression.
We don't have to wrap the directive with square brackets.
This syntax is a shorthand way of writing structural directives.
It also makes it easy to identify structural directives for the rest of this course.
We will use this shorthand syntax whenever writing structural directives.
In the resource section of this lecture, I provide a link to a page of shorthand examples.
Angular provides examples of how structural directives are transformed into the energy template element
with this shorthand syntax.
Some of the examples contain directives we haven't learned about yet.
In the next lecture, we will explore another structural directive.