All language subtitles for 15. Communicating Properties to Directives

We've now seen how we can mess around with an element that we apply a custom directive to.

Let's now start to increase the complexity of this little directive.

We're going to say that instead of always setting the background color to Orange let's allow another

developer or ourselves in this case to specify exactly what background color we want to set.

In other words I want to allow another developer out in a little bit of extra code inside of here something

like maybe background color or color or something like that.

I wanted to be able to be specified on the fly as like black or red or yellow or whatever else but in

order to do so I want you to recall exactly how we were communicating from a parent component down to

a child component EQ on some previous applications.

Let me give you a quick reminder of how we did that.

I'm going gonna give you a very quick little code snippet down here at the very bottom the file to communicate

from parent to child component.

We did something like this in the parent component template.

We wrote out something like app dash card and then on there we use that property binding syntax.

We said something like title equals some value.

And remember whatever was inside of those double quotes because we use the square brackets was evaluated

as code that we wanted to put a raw string inside there.

We would write out inside of single quotes something like Snowy Mountains after that.

We then wrote out a little bit of code inside of the child component class inside the child component

class file.

We imported that input decorator from angular.

We then created some child component and inside there we use the input decorator to say that there is

going to be some property that was created and assigned by the parent component.

That's how we used that little input decorator though in this scenario the parent component would create

an instance of the card component it would then set the title property equal to whatever was inside

of those double quotes inside the child component we specified that this property right here with an

identical name of title was going to be set by the parent component by using that input decorator.

So all that stuff went on just to communicate from a parent to a child.

Now make a guess.

How we communicate from say this element right here down into the directive how do we pass information

down.

Yep we do the same thing.

It's the same thing but to communicate information into a directive we're gonna use the property binding

syntax everything inside there will be evaluated as code we're going to write out the name of the property

that we want to set on the directive and then on the directive class we're going to use the input decorator.

We're going to decorate some property that is identically named between the two.

That's how we're gonna communicate information into a custom directive with all that minds.

Let's do all that right now.

To get started inside of my last directive.

I'm going to get the input decorator and I'm going to say that this thing is going to have some new

property called 0 2 background color and I'm going to decorate it with the input decorator and I'm going

to say that this thing is going to be a string

and simple enough.

Then after that I'll go back over to my apt component I'll find it where I'm making use of that app

class directive and right after app class I'll put in the property binding syntax of background color

and I'll say inside those double quotes I want to assign this thing the string of red.

And the only reason company in all those extra spaces is to just make sure it's really clear that I

have a separate string inside of here of red because we're using those square brackets.

Everything inside gets evaluated as code.

We have to wrap that string with single quotes.

Otherwise if we just put like that right there angular is going to think that we're trying to look up

the red property on our component class but that's not we want to do we just want to throw in the string

of red OK.

So as soon as you add the in you might very quickly start to see an error around this.

If you see an error around that.

Here's what to do.

Go to the menu bar find a view select command pallet.

And once again we're going to search for reload window and go ahead and run that command if the error

still persists after that.

Then you very likely have a typo somewhere else and so want to do a little bit of troubleshooting OK.

So now we can flip back over to our class directive now inside the constructor we can attempt but not

successfully we can attempt to set the background color of the element do whatever the background color

property is.

Now why am I saying attempt here.

Well the reason that we are only attempting this and the reason it's not going to work remember what

is going on behind the scenes angular is going to first create an instance of this class directive as

soon as it sees app class right there.

So as soon as English sees app class it finds this class reads an instance out of it.

And that means that we're going to run all the code inside the constructor Well as soon as we run this

constructor we have not yet set the value of background color but the constructor is going to run background

color is going to be undefined and so we're going to set the elements background color property to undefined

as well in like half a second later or a fraction of a second later angular is going to complete asking

the rest of the template and it's going to see that it needs to set the background color property to

red.

And so right after this constructor runs background color then gets set to the string of red but unfortunately

by that time it is too late just to get a very easy solution right here.

I'll show you a more foolproof solution.

Just a moment but you just get a solution.

I'm going to wrap that stuff inside the constructor with a set time out now as I do this I'm going to

add a comment right above it.

I'm going to put a set time out of like 50 milliseconds.

So I'm gonna put a comment right above I say never do this.

This is not the right way to somehow get access to a property after the element has actually been instantiated

or created.

Don't do this.

We're just doing this as a quick little solution just so I can show you that.

Yeah.

That's how we communicate some value down into the directive.

It's going to save it now flip back over and there we go.

Background color of red but all worked.

But like I said not a good solution though.

How do we fix this.

Well let's take a quick pause right here we'll come back the next video and I'll show you exactly how

to solve this situation.