Getting Input Text with Map

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

By default, Inputs will push input events into the stream. This lesson shows you how to use map to convert the input event into the text you actually want.

[00:00] To add an input stream to our project here, I'll type input, give an ID of input. That way, we can look it up by this input ID. We'll set up an Observable.fromEvent(document.querySelector), look up that input ID, and we want the input event. Then if we simply subscribe to this, and we log out whatever it gives us, so console.log(x), what that x is going to be as I type is input events.

[00:37] Each of those came through as an event, but what I really want is event.target. scroll all the way down to value. That's where I'd get the string of what. To get that string, I could either do x.target.value here if I wanted the full event, or what you'd probably want to do is map this to. We'll take the event, and we say, from the event, we want the event.target.value.

[01:12] Now what will come through this stream as I type is the actual stream that I'm typing into the field. To clean this up a bit, we'll take this, we'll cut it out, we'll call it input, so we'll drop the input in there. We can take this entire mapped fromEvent. We'll call this our input stream, and then subscribe to the input stream. We're back to where we were, where I can type whatever.

Dr.Emmett Brown
Dr.Emmett Brown
~ 5 years ago

Hello dear brother,

I really like your courses because They're very clear. They can understandable and you're pushing yourself to show which way is wrong and what can we do to make it correct..You're a "proof man" :)

..and thanks God , You're using JetBrains products in your courses and this is absolutely great..

God bless you bro!