All language subtitles for 14. Accessing Elements from a Custom Directive

Now that we have our directive generated I want to give you a very quick example and show you how we

can kind of play around with the elements.

Do we apply the directive to the we're going to rebuild a very classic example of directives that you

see inside of like every angular tutorial ever including the official documentation.

I want to very briefly we're going to change the class directive but very briefly we're going to make

our class directive apply a background color to whatever element we apply the directive to.

But this is just going to help us understand how we can actually access the elements that we apply the

directive to and how we can change some properties on it to get started at the very top.

I'm going to import something called Element ref and then on the constructor I'm going to write in private

element is of type element ref like So what does this element thing listeners we add in this argument.

Angela's going to make sure that whenever we create an instance of class directive a first argument

to the constructor is going to be the element that we applied the directive to then the words this element

right here is pretty much a direct reference to that Ally lie right there we can access this element

property and start to mess around with some of the underlying properties on the actual HDL element.

For example we can start to add in some different styling rules and whatnot.

We can modify some classes on it all that kind of good stuff.

So instead of doing a cuts lug I'm going to instead reference this dot element and here's the one gotcha

here.

This dot element is not the actual H T.M. element to actually get the HMO element.

We have to access a little property inside of element called eighth element.

This native element thing that is the actual each small element we care about.

Keep in mind as you start to access that element then on there we can mess around with that element

in any way that we would normally mess around with each team L from some javascript code for example

we can set a style on there or something like that but to set a style you could say style dots background

lowercase G background color is about orange except now by save this and flip back over I'll see it's

really hard to see here.

I'm going to zoom in really really far.

You'll notice that Yeah right there.

Look at that.

Yeah that's orange.

See that orange background color.

Okay maybe that was a bad place to apply this directive though let's try applying that directive to

instead the H or element that we're creating right there at the beach.

So it is working it's just really hard to see that background.

We're gonna go back over my template to remove app class from the ally and then go down to the H four

down here and apply hub class there instead of look back over Yeah there we go now it's orange was orange

before but now you can actually see that it's orange.

OK.

So that's how we just reach into some directive how we get access to the elements.

Now we just mess around at the element in some fashion.

Oh pretty basic pretty straightforward but obviously this is not super useful is if we want to apply

a background color of wants to an element Well we're just going to use some CSX we're not gonna write

a custom directed for that nonetheless at least we understand how to reach out and grab an element.

Let's take another pause right here.

When come back the next video we're gonna figure out how we can receive some arguments into our directive

as well.