Hello, everyone, and welcome back in this new section of the course, we are going to cover Angular
Directive's, this is now a great time to switch to a new brand so that we are sure that you have a
clean starting point for this section.
Let's then grab a new code sample from our course repository, let's say a little over to the GitHub
page of the angular niversity available here at GitHub dot com, Angulated Dash University.
Let's look for the lessons code.
We are going to go here to the search repository search box and we are going to look for the angular,
deep dive course.
Let's click into it and let's select a new branch.
We are going to head over here to the branch dropdown and we're going to select here the two dash directive's
branch.
There will be other branches on that dropdown, but this is the correct one to dash directive's.
This contains the code for the beginning of this new section.
As usual, you can grab the code here as a zip file using the clone or download button, or you can
switch into this branch if you are using git.
If you are using it and you are not downloading zip files, you can switch to the branch by running
the following commands, get checked minus B to this directive.
So this is the name of the local branch and origin to this directive.
This is the name of the remote branch that we want to copy into our work environment.
Once you have the code installed, you can then start the server using NPM start and you will get here
a clean starting point for this section.
Now that we have the new code up and running, let's then start talking about angular directives.
There are multiple types of directives.
Some of the directives we have already covered, they are components.
Components are directives with a template.
There are also other types of directives, such as, for example, structural directives that we have
covered when we covered NGF, Energy for Energy Switch, etc..
These are attributes that are added to an element of the page and the element can either be a plane
HTML elements such as a div or a custom component such as, for example, CROSSCOURT, and these attributes
that we apply to the elements are going to either modify the behavior of that element or they are going
to modify the behavior of the element.
This is a very particular type of directive, the one that takes the star notation at the beginning.
This is a structural directive.
We're going to cover these specifically later on.
Right now, let's focus on attributes, directives which we did not demonstrate yet.
So what does an attribute directive look like?
Let's say that, for example, we have here an e-mail form and the form has here and input field if
we are using plain e-mail.
So these are not angular directives, we can mark this input field as disabled or required.
So these attributes that are added here to this plane HTML element are effectively modifying the behavior.
And in this case, the appearance of the element disabled is going to typically carry out the input
and also modify the behavior, meaning we cannot input data into the input field any more.
Required, on the other hand, is going to change the look and feel of the input field.
The field will be marked with a red border in case it's not filled in.
These two properties, disabled and required, are a good example of what an angular attribute directive
will look like.
These are attributes directives that are applied to an element and modify its behavior and or appearance.
So let's see how can we build in angular custom directives?
So the same way that we can extend the browser and create our own HTML tax like we do here with corsairs,
we can also extend the standard, the browser functionality to create our own custom directives.
Let's then go ahead and create our first custom directive.
We are going to head over here to the terminal.
We are going to clear the terminal and we are going to run the following angular CLIA command gng,
which is shorthand for generate directive.
That's what we want to scaffolded.
And then the folder that we want to put the new directive in.
Let's create a folder called Simply Directive's, and we are going to add here the name of the directive.
We are going to call it highlighted.
So this is going to be an attribute that when added to a course, cart is going to highlight it with
a very visible border after executing this command.
We are going to see that here in the directives folder we have here in new highlighted directive.
And so here is what a directive looks like.
As we can see, just like the case of components, this is a plain typescript class.
It has here a directive decorator that is very similar.
Were component in the sense that we have to specify here is selected for this directive, but unlike
the case here over the course of selecter, which was an element selected here, we are specifying an
attribute selector notice here, the square brackets around the world highlighted.
This means that this directive is going to be applied to any element of the page, which has here the
highlighted attribute applied to it before anything else.
Let's quickly confirm that indeed, by adding here to this element, we are creating an instance of
this highlighted directive class and we are adding it here to this element.
So in order to confirm that we are creating a directive, let's add here some logging at the level of
the constructor, we are going to simply say directive created.
And with these logging in place, let's reload here the application and let's have a look here at the
console so we can see the directive is indeed being creative.
And let's confirm that this is happening because the highlighted element was applied here.
So if we remove the element and we reload the application, we are going to see that this time around
the directive was not instantiated.
If we now have here a second crosscourt and let's passive discourse input another course from the courses
array, let's say that we are going to pass the first the course in the array.
We are then going to apply here again, the highlighted directive.
Notice that we can pass an expression for the moment.
Let's not do that.
Let's simply apply the highlighted directive to two separate course cards.
So if we now try these out, we are going to see that we have two cards here on the screen and we can
see that the directive was created two times.
So these in the disconfirm that by adding the attributes to our element, we are attaching it some behavior
implemented by the directive that did not exist before.
Let's now quickly switch here to the application component and remove the second card that we won't
be needing.
And let's start talking about how we are going to implement the highlighted directive.
This is coming right up in the next lesson.