This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Getting Input Text with Map

1:46 RxJS lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Fabio Bedini

Just to avoid headache
(if you are using angular2)
to try typing event.target

.map((e: KeyboardEvent) => (<HTMLInputElement>event.target).value)
In reply to egghead.io

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?