All language subtitles for 4. Event Binding Syntax

Now though we've got some valid HDL on the screen.

We need to start adding some actual interactions to each of these elements.

So for example we need to make sure that whenever user changes the length right here we consider that

length when we actually generate a password.

Same thing for selecting or D selecting these checkboxes.

And of course once the user clicks on the Generate button we need to actually generate a password and

show it inside of that input.

That's very clear at this point that we need to somehow deal with user interaction.

And that's what we're going to figure out inside this video.

How do we write some code to watch for a user changing that value or checking that checkbox or clicking

that button to give ourselves a very easy straightforward target.

We're going to first try to figure out how we can make sure that we just console log some kind of message

anytime a user clicks on that button right there.

That's the first thing we're going to figure out now as soon as we start talking about handling user

input.

You might think back to this diagram we looked back over here.

Remember in this diagram we spoke about a very important type of file inside of angular projects a component

class file and we had said that component class files contain code to run whenever important events

occur like a user clicking a button.

So as you'd guess we're going to find the component class file where our application right now that's

going to be our app component dot t file.

So we're going to find that file and inside that class we're going to add in some code to run whenever

user clicks on that button.

All right.

So I'll go back over to my editor inside of my source app directory.

I'm going to find the app component to yes file.

Here is my component class now as we mentioned a couple of times.

There is some crazy syntax inside of here that we're going to go over in due time.

But right now let's just focus on all this button handling stuff inside the class app component.

There's already one property at being initialized inside of here.

So we're setting title equal to a string of P.W..

This is some pre generated code right here.

We're not actually using this property anymore so we're gonna delete it out of the class.

We're then going to replace it with a function that is going to be called any time a user clicks on

that button the inside of my app component class.

I will write out on button

and then inside of that function will add a simple console logs all say console log button was clicked

like so OK.

So we've now added some functionality to our class.

We've added specifically a method that is going to be called anytime a user clicks on that button just

adding the function itself doesn't actually do anything for us.

We have to specifically tell angular that anytime someone clicks on that button we want to call this

function right here the set up that mapping we need to add in some code to our template file.

They're going to open up our template file.

We're going to find that button we're going to add in a little piece of code to tell angular to call

this function.

Anytime user clicks on the button I will change back over to my app component each female file inside

of you're going to scroll down until I find that button element here's the button right here with the

very special syntax we're going to add into this button is not going to look like typical A.T.M. at

all.

It turns out that what we write inside this file is not strictly each team out it is technically a syntax

called the angular template syntax.

So we can write out what looks like normal H e-mail but there are also several other pieces of syntax

that we can use.

That is definitely not HCM L at all.

This is going to be that first little piece of strange syntax so we start to see inside of the button

element itself.

I'm going to give myself a little bit of space here and then I'll put in a set of parentheses we put

in a set of parentheses.

Anytime you want to tell angular to watch for some kind of event to occur on this element inside those

parentheses we're going to add in the name of the event that we want to watch for.

So in this case I'm going to put in click after that all then put in an equal sign them double quotes

and inside there we're going to try to call that function that we just wrote out over here called on

button click I will type inside there on button click and I will call it like a function OK we're gonna

pull this line apart very quickly.

But first let's save this file.

Go back over to our browser and test this out.

We'll flip back over go back to my application.

I'm going to open up my chrome console by right clicking anywhere on the screen and clicking inspect

all then go to the console tab and then finally I'm going to click on the Generate button as soon as

I do so I'll see that console log up here I can click it as many times I want and I keep getting additional

console logs OK.

So what's going on with that syntax.

Well quick little diagram here.

But this is what you're for too as the event binding syntax.

We're going to write this out inside of a template.

Anytime that we want to watch for some event that occurs to an element.

So as I mentioned we're going to write in a set of parentheses inside the parentheses we're going to

put the name of the event that we want to watch for.

We can put in any standard H and vet event name inside there that we want.

So for example we can have a mouse enter event or a mouse leave.

We can have a drag event.

We can have four inputs a change or an input event and so on all those standard h t mail events that

are you are used to.

Those names can go directly inside of your.

Now here's the really confusing part about the event binding syntax whatever it goes inside of those

double quotes right there is going to be evaluated as code when ever that event occurs.

So whenever a user clicks on the button.

This right here on button click that gets evaluated as though it were code that even though it really

looks like a string to you and I.

Not a string it is code though you're writing inside there.

Now what is really interesting here is that calling on button click is going to automatically bind the

on button click function that we defined inside of the component so this reference to on button click

right here calls that method right there what is kind of surprising about this is that we did not have

to write anything on here like say component dot on button click we didn't have to write that we did

not have to write this dot on button click we didn't have to write app component on button click or

anything.

All we have to do is put in the name of the function on our class that we want to call whenever a user

clicks a button that's it though this syntax right here with the double quotes where we have some code

that is going to be kind of confusing when you're first going to use to angular or we're going to use

this syntax so often that you're going to get used to it.

Very quickly OK.

So now that we've set up our first click event handler and we've had a very long discussion about it.

Quick pause right here.

We're going to continue to add in some more functionality in just a moment.