[MUSIC]
In the previous exercise, we saw the use of our first structural directive,
the ngFor.
Let's ask ourselves a few more questions about structural directives and
learn how they are useful when we write our Angular applications.
Structural directives are one kind of directives.
So directives is a general umbrella under which you have components,
then you have structural directives, and then you have attribute directives.
So let's learn a little bit more about directives.
So what we realize is the Angular templates are dynamic, so they need to be
created on the fly, there will be a lot of manipulation to be done on the DOM.
So, what the directives help us is to enable us to give instructions
to the Angular on how to render the templates to the DOM.
So, they use directives to give instructions
to Angular as it is rendering the templates on the screen.
So, in general, a directive can be defined directly in Angular using
a class with the @Directive decorator.
We well see an example of a directive that we can ourselves
create a little bit later in this course.
For the moment, we'll look at the building directives.
And in particular,
we have already encountered our first kind of the directive, which is a component.
A component is a special kind of directive and
Angular, which has its own template associated with it.
And we have already seen how we can leverage a component to define
parts of our layout for our application's screen.
As I mentioned, there are two other kinds of directives in Angular,
structural and attribute directives.
We'll quickly examine structural directives in this lesson.
And then we will look at attribute directives a little bit later in
this course.
So what are structural directives and how are they useful for us?
What we realize as we use structural directives are,
they help us to alter the layout of our content
by helping us to add and remove elements from the DOM.
In particular, note the use of the term add and
remove and replacing elements in the DOM.
So you are literally using the structural directives to manipulate
your DOM of your webpage.
So, you can use the structural directives by applying them to a host element,
typically a div or a list item in the DOM and also to its descendents.
We have already seen the user,
the ngFor structural directive, in the previous exercise.
And we saw how we use the ngFor to loop through an array of dishes,
and then layout each one of them to construct the menu for our restaurant.
Here, I will briefly mention some of the common structural directives that you will
encounter as you write your Angular partition.
One of the most common structural directives that you will see is the ngIf
directive.
When you use it in your template syntax you will write it as *ngIf,
so this is how this directive is used in your DOM.
So, for example, if you apply the ngIf directive to a div like
this in this example, what you're specifying where is that
if the selectedDish is not null then this div will be added to the DOM.
If that selectedDish is null, then this div,
whatever is contained in this div will not be added to the DOM, so
you are literally removing this from the DOM if the value turns out to be false.
If it turns out to be true, then it is added into the dump.
Similarly, we saw the use of the ngFor directive.
So, where we defined, for example, for the md-list-item in the previous
exercise we said *ngFor and said, let dish of dishes.
So this allows us to iterate over the array of dishes
that are defined in our type script coat.
Another structural directive that might find common use is the NgSwitch directive.
Although I don't have an example right now,
later on in this course we will encounter the use of the NgSwitch directive.
This allows you to selectively add certain elements to the DOM
by specifying a condition, depending on what the condition evaluates to,
then you will be using one of those elements among the list.
If you are familiar with switch statement from C++ or Java,
the NgSwitch seems very familiar to you.
So it'll act similar to the switch statement that you
are used to from Java or C++.
With the short discussion on structural directives,
let's move on to the next exercise where we will continue examining components.
[MUSIC]