All language subtitles for 13. Generating Custom Directives

In this video we're going to take a look at something really interesting and fun.

We're going to try to create our own custom directive.

Let me tell you about what we're gonna build.

But first I'm going to delete all this energy switch stuff at the very bottom and uncommon at the div

with the H or in image inside of it.

OK.

So what are we going to make with a custom directive.

Well it can be really simple and straightforward to understand what we're going to make.

We're going to rebuild a portion of the energy class directive from scratch.

That's gonna be a lot of fun.

We're gonna see how this thing kind of works behind the scenes.

Now I said that we're going to rebuild a portion of it.

So specifically we're gonna make our own directive that accepts this kind of argument like an object

where we're going to have some keys and a boolean values.

And if that boolean value is true we're going to apply that key as a class to the element.

Otherwise if the billion value is false we will remove that class from the element at the very end of

the day.

We're going to essentially be able to go through this file and replace the energy class elements or

the engine class directives excuse me that you see inside of here with our own custom ones like custom

directive or whatever we end up calling Rs.

That's the goal but the first thing we have to do is generate a new directive.

We're gonna generate a directive using the angular the ally as we've used to generate pipes and components

already.

I'm going to flip back over to my terminal and inside my pages directory I will run and G generate directive.

We're going to call our directive simply class

all right.

So it has created a new file inside of our app directory world class not directive not to.

So let's go check that out inside my app directory.

I'll find a class dot directive dot.

Yes but this is all the code we get when we first make a directive that's it.

We don't get anything else whatsoever.

So unlike the pipe that we generated a little bit ago remember when we generate a pipe we get that transform

method and it's pretty easy to get started writing code right away with a directive.

Now we don't really get a lot of help the first two we need to understand is just how we make use of

this directive.

Well if we look at the decorator right here you'll see that has a selector property but the angle brackets

right here mean that you make use of this directive.

We're going to add the word app class as an attribute on some element inside of a template.

For example if I go back over to my app component right now and on this very first ally I'm going to

add in just the word app class like so that's how we would make use of our directive right now.

Now just to make sure that it's actually being used inside my constructor I'll add in a console log

of last directive used.

Like so let's then save this and then flip back over to our browser once I'm back over here I can open

up my console and I'll see right away.

Yep there is a class directive used that is just how we can generate a directive and then immediately

apply it to some element.

Yes.

Now we've got this thing generated and we understand we're trying to build.

Let's take a quick pause right here and then start to play around with this directive in the next video.