[MUSIC]
In the very first module we reviewed directives briefly and
we look at structural directives.
We saw how structural directives enable us to design the templates.
For our Angular components.
In this lesson, we're going to review attribute directives.
The third kind of directive.
And we will also look at how we can design a custom directive
in the exercise that follows this lecture.
So as we realized, directives are a way
of designing both Angular templates and enable us to do
various parts of the dam manipulation with an R Angular applications views.
So, we saw the use of directives to give instructions to the Angular repetition and
how to render the templates into the DOM.
And we already learned that within the Angular application,
the use of structural directives in the templates enables us to design
our views of our Angular application.
We also learned that the component that we have used so
extensively in the various exercises in this course.
It is a special kind of directive which has a template or a view attached to it.
And we also learned earlier that,
there are two other kinds of directives that we can use within our templates.
The structural directives and attributes directives.
We looked at some built-in structural directives in the very first
module of this course.
And we saw how we can use structural directives like the NG4 or NGF and
more in that exercises in the previous parts of this course.
Now we'll look at the other kind of directive, the attribute directive.
What is an attribute directive and
how does it help us when designing our Angular application.
So what are attribute directives?
Attribute directives are used as attributes for elements in your template.
So just like that you have your HTML code that you write within your template and
the HTML elements you can apply an attribute directive
to those HTML elements.
We also saw the user's structural directive.
And we saw the components can themselves add additional HTML-like
elements that can be used within the templates of your Angular application.
So the way we use the components with their selectors
was one way we used directives within our Angular application.
When we saw the use of structural directives which were applied to
the various HTML elements within our template.
Now we look at attribute directives which enable us to change
certain properties of our HTML elements.
So what are the use of attribute directives?
Attribute directives listen to and modify the behavior of other HTML elements or
attributes or properties or components that you use within your templates.
We have indeed actually used some of the built-in
attributes directive already without explicitly talking about them.
Talking about the built-in attribute directives that come as part of your
Angular framework.
You've already encountered Ng model in some of the previous lessons
in this course, specifically in the data binding area and
also when we studied about the fonts in the previous module.
There are two other kinds of built in attribute directives that we
might encounter is NgClass and NgStyle.
By the name itself you can guess what their purpose is.
Similarly, there are some other modules that you use within your Angular
applications like the FormsModule and also the RouterModule which have their
own set of built-in attribute directives that we make use of.
Indeed, we have already made use of them when we define forms and
also the use the router within our Angular application earlier.
Now, at this point, you might be wondering, how do I go about creating my
own attribute directive if I'm interested in creating a custom directive, so
this is where we will look at how you can derive a custom directive.
Let's explore custom directives in the next slide briefly and
in the exercise that follows.
So in custom directives your expectation is that you would be able to implement
what you are interested in.
In particular, so this is where we can create our own custom directives.
Using the Angular CLI, you can scaffold out the bare bones code for a directive
and thereafter modify that code in order to implement your custom directive.
So when you implement a custom directive using Angular CLI,
it'll create a directive for you.
And then you will immediately notice that within the directive,
you will be using that directive decorator ornate
class in order to convert the class into a directive and
we will encounter one such in the exercise that follows.
In addition, with the director, especially when you're using attribute directives and
you want to modify any of the elements that are used within your templates.
Another class that is useful for us is called ElementRef.
This is also important from the Angular code, and this is injected into your
directives constructor, written your directive class.
And then this enables you to access the DOM elements and
then make modifications to them.
So with this quick understanding of how you can create custom directives,
let's look at an example in the exercise that follows this lecture.
[MUSIC]