- So far, we've done everything in the console log
because I just want to keep it simple
and demonstrate how the operators affect our data.
In this chapter, let's get a little crazy
and start building an actual user interface.
I know, I'm excited too.
First, let's open up app.component.html.
We've removed everything in here
and we'll just start with a button.
(typing)
Okay, now I want to create an Observable
that will notify me any time a user clicks on my button.
How do I do that?
Hm, let's go back to ReactiveX.io and find out.
So we're going to scroll down
to that 'choose your own adventure' feature.
I have no Observables yet
and I want to create a new Observable
from an existing source of events coming from the DOM.
Perfect.
We want the static operator fromEvent.
And here's a code sample.
So our code's going to look pretty much like that.
First, we need to import fromEvent.
(typing)
And then we're going to do this
inside the ngOnInit life cycle hook.
If you're using angular,
be sure to put this inside ngOnInIt.
That's the life cycle hook that tells it
to wait for the DOM to render.
Otherwise, you'll get an error that says
"document not found" or something like that
because this is called before the DOM is rendered.
So we're going to go ahead and add Observable.fromEvent
and we'll make that event the 'click.'
And then right away, we're going to subscribe to this
and just like before,
we're just going to console.logout our payload.
Now, let's check it in the browser.
Okay, here's our click button
and we click and there's our console log.
It includes the XY coordinates
and a bunch of other information about the click event.
And now you know how to create an Observable
from a click event.