All language subtitles for 16. Intercepting a Property Assignment

In this video we're going to figure out a better way to implement this step right here.

So we're going to remove this set time outs and relocate this code to a more appropriate location.

Understand how to do this.

I first want to help you understand how angular treats a directive that we create a directive is treated

by angular very very similarly if not identically to how normal components are treated as well.

Behind the scenes whenever angular starts to pass our template it sees the app class directive right

there.

It's going to go and create an instance of the matching class regular is going to create an instance

of class directive we can almost imagine that there's some code inside of angular that looks like this

on the it says on directive is new class directive then immediately after that English is going to see

that we try to set the background color property on there to a string of red but once again we can almost

imagine that there's a line of code in angular that does something like this directive dot background

color equals red what you and I really want to do to solve this issue inside of our constructor is somehow

detect this event right here.

We want to detect any time that the background color property gets set we can very easily do so by using

a little feature of typescript.

This is a feature that we've not really looked that before.

So let's go back over to the typescript playgrounds of our browser and we're going to show you just

a little bit of syntax.

So once again I'm at typescript Lang dot org slash play right write out a quick little example right

here everyone loves when they're learning about typescript classes of car right.

That's what I'm told.

People love class car.

No I'm kidding of course very boring.

But nonetheless let me show you the quick example.

Very similar to our directive.

Let's imagine that class car car has a color property and maybe this thing is going to start off as

like a string of red.

And we might create an instance of car and then tried to set that property though identical to what

we just saw inside of our Ed so it would be fantastic if we could somehow detect this setting event

right here and run some code in response to it.

What turns out with typescript we can do exactly that.

Here's how we do it inside of my class of car.

I'm going to write out that other gonna make that a method and it's going to receive some argument of

you color.

And that's going to be a string and then going to remove the old property definition right there and

just leave this setter.

So what does this thing really do.

Well by adding on set right here.

That means that when ever we run this line of code right here whenever we tried to update the value

of the color property it's going to instead run this color method though inside the method as a first

argument we're going to receive whatever we were passing in as or whenever we were trying to do the

assignment with in this case new color would be blue.

As a matter of fact if I do a console log of color we'll see a console log of blue.

So I'll zoom out it's going to click Run really quick take my console.

And yeah there we go.

We got blue that's pretty much it to detect never a property get set.

We can write out a method with a name identical to the property and then put the set keyword right in

front of it whenever we then set that property.

We can run some code.

And so as you could probably guess.

Well that would be really fantastic to use inside of our class directive because whenever angular behind

the scenes runs something like that line of code right there we can take the color that is provided

for the assignment and use it to update your background color of art a element OK.

I'm going to delete this stuff down here and I'm going to add in that background color I'm gonna receive

some color argument that's going to be a string and I'm going to cut and paste this entire line inside

the constructor inside of this new setter

and then at the very end over here I'm going to update that to background color come from whatever argument

was actually passed in you'll notice that now we've got a little bit of an error here that's because

we've got a duplicate of some property though as far as typescript is concerned.

This right here is really kind of like defining a property that we've now got.

Well one property called background color and another called background color.

So how do we get around this.

Well it turns out that we just remove the original definition right here.

We're going to delete that.

And then finally we still want to make sure that this kind of like imaginary property right here and

still be set by some parent component.

Now the last step we're going to apply the at input decorator on there like so.

And then finally I'm going to remove all that set time out stuff out of the constructor and that's it.

This syntax right here pretty nasty.

But the other day all that really allows us to do is intercept any time angular tries to set a property

on our directive as soon as we intercept that we're going to take the value that English is trying to

set that property to.

And we're going to use it to actually update something else.

We're kind of like intercepting this assignment and tricking angular almost.

Now I say tricking but this is a hundred percent intended behavior so we're not like breaking anything

or going against the rules or anything like that.

OK.

So let's now save this look back over and I can see sure enough it's red.

And if we want to.

Well let's flip back over to our component class or the cone template excuse me we can change background

color to Orange yep it's orange you get the idea and go to black for some crazy reason because now we've

got black with black text kind of hard to read but yeah it definitely works OK.

That's a little bit more on directives.

That's how we make a directive that's going to respond to some property being set on it.

There's still a little bit more I want to show you around custom directives so quick pause right here

and I'll see you in just a minute.