We just had a brief introduction to attribute directives in the previous lecture.
Let's now construct a custom attribute directive for our angular application and then
make use of it within the views of some of the components within our angular application.
Along the way, we will learn about how we can create
custom directives and use them in our Angular application.
We will make use of Angular CLI to create the custom directive and thereafter,
update it to perform the kind of
features that we need provided by this attribute directive.
Under the keep the directive in a separate folder named Directives,
within my app folder.
So, let me create a new folder named Directives.
Now, I'm going to create my custom directive inside this Directives folder.
Will take the help of angular CLI to create our custom directive.
So, at the prompt,
type ng generate or g detectives/highlight.
So, this particular directive is going to be called the highlight directive.
So with this, we will create
a new directive called the highlight directive and then we will now go
and edit that highlight directive files that
have been created to create our custom directive.
What exactly am I trying to achieve with this directive?
Let me take you to the menu view within our Angular application.
In the menu view,
when I want to select any one of these items currently,
I have no clue exactly where I am.
Now instead, when my mouse hovers onto any one of these items in my grid list,
I want to be able to highlight some item to indicate that if I click,
I'm going to be selecting that particular item.
So, that is what the functionality that I am going to
design using my highlight directive that I have just created.
To do that, let's open the highlight directive.ts file.
So, you see that we have the bare-bones scaffolding available for the directive
already here and you'll see that we have
already imported the director from the Angular code.
Now to this, I'm going to add in a few more imports.
So, we'll import ElementRef and then we will import Renderer2 here.
Now Renderer2 is available only with Angular four and above.
The earlier version of renderer was called
renderush and it has been duplicated now with Angular four.
Renderer2 is now a new implementation of
renderer with better support for some other features.
So, I'm going to apply the Renderer2 for creating the highlight directive.
Now why do we use this renderer?
Now when you create directives within your Angular application,
from your Angular application itself,
although at the moment our Angular application is being rendered mainly in the browser,
you can use the same scaffolding code for
your Angular application to create an application for other purposes.
In the native skip course that we will see later in this specialization,
we will see another use of this code for creating applications using NativeScript.
So, in that case the rendering would be done in a different way,
not into a browser.
So, we need to use this Renderer2,
which allows us to automatically adapt itself to
the appropriate platform on which the rendering of this view is being done.
So, that's the reason why I am making use of the renderer here.
Also, one more thing that I want to import is the HostListener.
The HostListener will listen to mouse movements from the screen
and appropriately respond in those circumstances.
We will see the use of these when we create the directive in a few moments.
So now, that we have imported the things that we need,
we're going to inject a few things into our constructor.
So, we'll first use a el,
which is of the type ElementRef and
also the second one that we will use is the renderer,
which is of the type Renderer2.
Now with this, what we're going to do is that we will use
the HostListener and then they would indicate that for the HostListener,
when the mouseenter event occurs,
then we'll call the onmouseenter method
and in the onmouseenter method, we're going to do something.
Similarly, I'll create another one
called HostListener and mouseleave.
So when the mouse leaves a particular region,
then what are you going to do on mouseleave?
We're going to do a different operation.
So, what we're going to do is when the mouse enters a particular region, in this case,
we are using this attribute directive in order to highlight
the specific item from my grid list onto which the mouse has hovered on to.
So, that's the purpose for implementing these
and when the mouse pointer hovers away from that item,
that will no longer be highlighted.
So, that's the purpose of this directive,
the highlight directive that I'm creating here.
So, when the mouse enters a particular area.
So, I'm going to use the renderer and the renderer provides a method called addClass.
So, this method will be used to add a class to the grid item in my grid list.
So, the class that I'm going to add,
the way it is configured is will say this.el.nativeElement and
the second parameter is
the class name that you're going to apply when you venture into that area.
So, we'll apply this highlight class to that element when
your mouse moves into the region where that element is rendered in the view.
Now, the same thing. I'm going to do another method when the mouse leaves,
I will remove that class.
So, the removeClass method is also supported by Renderer2.
So, in this case,
when the mouse moves into that region,
this highlight class will be added to that grid item.
When the mouse leaves that particular grid item,
the highlight class will be removed from the grid items.
So, this is how using this attribute directive,
I'm adding and removing classes,
CSS classes to my grid item in my GridView page.
Now, the next step is of course to create this class called as the highlight class.
So, to do that, I will go into the styles.scss
file where we have the global styles stored here.
So, within the styles.scss file,
I will add in the highlight CSS class there.
The highlight CSS class I will define as background-color.
I will apply background-pale,
which I have already defined earlier and then,
I would apply a border of one pixel,
solid border of the color,
primary-color-dark, which also I have defined earlier
as a CSS variable and I will also increase the z-index to one.
Which means that that item will be raised up over the remaining items in there.
I'm sure from your knowledge of CSS you understand what is being done.
In addition, I'm going to do a little bit of a transform on the item there,
I'm just going to scale it up by a tiny amount,
by scale it up to 1.01.
So, tiny little bit raised and then showed up,
so that highlights it on the screen.
So, this is the CSS class that
I'm going to apply using the custom directive that I have created there.
Now, where am I going to apply this custom directive?
We're going to use this custom directive in our menu components template file.
Now, before we do that,
let's go back to highlight directive and
you would notice that in the highlight directive,
you have that directive decorator here where you have a property called selector,
which has been set to app highlight.
So, wherever you want to use this directive,
you will use an attribute called
appHighlight within that particular element in your template.
So, that is how this directive is created.
So, let's apply this app highlight attribute
directive within our menu components template file.
So, going to the menu components template file,
I'm going to apply that highlight directive to this mat-grid-tile here.
So, in this grid tile,
I will apply that appHighlight attribute directive to this particular element here.
With this, we have completed all the updates.
Let's save the changes and then go and take a look at our application after this change.
Going to our application in the browser.
Now, with the application of the appHighlight directive that we have just created,
you'll notice exactly what happens when we browse onto an element in our menu view here.
So, you notice that whenever you hover onto an item in the view,
the highlight CSS class is being applied to each of them,
whereby what particular item is being highlighted in the menu,
so that this gives a better user experience for the user.
You can see that the size of that element is ever so slightly
increased and brought forward in the view here.
This completes the implementation of
the custom attribute directive that we did in this exercise.
This is a good time for you to do a git commit with the message directive.