All language subtitles for 8. Tracking Input State

All right now that we've got a good idea of what's going on.

Let's start to implement this kind of approach.

We're going to first take care of one of those checkboxes.

We're going to make sure that each of our different checkbox elements has an event handler assigned

to it whenever user changes the value of a checkbox by clicking on it.

We're going to store that value either.

Yes we want to include letters or no we don't.

And the final password as a property on our component class.

So let's get to it.

Well first take care of the use letters checkbox right here.

We need to make sure that we add an event handler to that thing and detect any time it gets changed.

Now just so you know us like ticking that thing in on ticking it is referred to as a change event.

That is the name of the event that is triggered.

Any time we change it I'm gonna go back over to my editor and I went to find my component template file.

Here it is right here.

And then going to scroll down to the label it says use letters I'll find the input tied to it.

And then we will add an event handler to it.

Remember this is the event binding syntax event binding syntax.

As we discussed just a moment ago right here uses the parentheses and then inside the parentheses we

put the name of the event that we want to watch for though on this input.

I will add in some parentheses and I'll say I want to watch for the change event and then whenever that

occurs I want to run a method that I'm going to define on my component class instance bold called The

Method.

How about on change.

Use letters we have not yet defined that method.

We're going to have to change or define it.

Right now I'm going to save this file.

I'll go back over to my component class instance inside of here or I'll find my component class and

then inside of it I'm going to define that method that we just tried to call.

Go on change what we call it use letters

now as you would guess anytime that we change that input right there.

Time we ticket or until ticket that method is going to be called but as we just discussed and as we

just looking at that diagram a moment ago we now need a property on our class to record whether or not

that thing is checked or not though on my class I'm going to add in an additional property to call it.

How about include letters and I'm going to give it a default or initial starting value of us by default.

We are not including any letters inside of our generated password so then anytime that on change use

letters gets called I will update the value of include letters.

So I'll say this dot include letters is going to be equal to the opposite of whatever it currently is

though not notice the exclamation there.

It's not include letters not to test this out.

Let's go down to on button click remember that gets called anytime we click on that submit button inside

there I'm going to add in a console log of this dot include letters that we'll try ticking that checkbox

and unthinking it and clicking that button a couple times and just verifying that we've got the correct

value stored on our component class instance it's going to save this file I'm going to flip back over

I'm going to click on generate right away and I'll see that by default use letters is false if I then

check that thing.

So the use letters checkbox in particular and then click on generate again.

It's now been flip to true.

And finally if I uncheck it and generate again it is back to false.

There are definitely keeping track of that property correctly.

All right.

So now we need to repeat that same process for the other two checkboxes as well.

I would like you to try to take care of this on your own.

So this is going to be a little exercise.

It is 100 percent optional.

If you don't want to do this on your own.

No problem.

Just skip over to the next video and I'll show you exactly how to do it.

Otherwise go ahead and try to add in a event handler to these other two checkboxes you'll need to go

through the exact same process of what we just did inside this video.

You'll find the appropriate inputs.

You'll add on the change event handler.

You'll call it method.

You'll need to make sure that you add a method to the component class.

You'll need to make sure you add in a new property to track whether or not to include the numbers and

symbols and so on and update that property inside the appropriate method once again.

Go ahead and give it a shot on your own if you don't want to do it.

No problem.

Just kept on over to the next video.

Quick pause and we'll go over a solution in just a moment.