This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Getting Input Text with Map

    John LindquistJohn Lindquist

    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.

    rxjsRxJS
    ^5.0.0
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    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.

    Discuss

    Discuss