Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Getting Input Text with Map


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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 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 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

    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.