All language subtitles for 6. Handling User Input

Let's add in some code to make sure that we detect whenever user types inside that text input to do

so.

We're going to go back into our component template.

That's our app component that HDMI file inside of here.

We're going to find our input element and then on that element we're going to add an event binding.

Remember we specify an event binding with parentheses inside the parentheses.

We list out the event that we want to watch for.

So in this case you want to watch for an input event which is triggered whenever user changes anything

inside this input and whenever that occurs we will try calling a method called on input on our class.

Remember that when we call on inputs or whatever method we call right here we probably want to communicate

whatever user just entered into that text input.

But to do so we need to refer to that event that target dot value property we can get access to the

event object that is created whenever a user causes the input event by writing out dollar sign event

and then on there we'll get the target which is a reference to the input element and then off there

we'll get our value like so now you'll notice that this is all underlined inside red as because we don't

have a method on our component class called on input.

Let's go back over to our app computer right now and add that in over inside of app component.

Yes.

After we declare our random text will then add in the on input method this will be called with some

value and we have to annotate its type as being a string then inside of here if we really want to follow

the directions we want to make sure that we console log whatever that value is so inside that event

handler will do a console log of value let's save this will float back over and test it out and get

over here.

I'm going to open up my console inside my browser and then I'll select the input and start typing messages

as I do so I see the value inside the input with every single key press it looks like that worked out

pretty well.

All right let's now move on to our next step in this step.

We're not going to do the character comparison right away.

Instead we're going to start to handle that success message at the bottom of our application.

This one right here right now that success message is always visible.

I want you to make sure that the message gets hidden by default.

When our application first starts up and then as soon as the user enters the exact correct text we're

then going to show success on the screen.

So after that we do want to in fact show that element right there go ahead and give that a shot.

We'll take a quick pause right here and go over a solution in just a moment.