Home » RxJS fromEvent() Creation Operator

RxJS fromEvent() Creation Operator

by Online Tutorials Library

RxJS fromEvent() Creation Operator

RxJS fromEvent() operator is a creation operator used to give the output as an observable used on elements that emit events, such as buttons, clicks, etc.

In other words, we can say that the RxJS fromEvent() operator returns an observable that emits events of a specific type such as buttons, clicks, etc., when you target the given event.

It creates an observable from DOM events, or Node.js EventEmitter events or others.

Syntax:

Following is the syntax of the RxJS fromEvent() creation operator:

Or

Parameter Explanation

  • target: It is used to specify the target argument which can be The DOM EventTarget, Node.js EventEmitter, JQuery-like event target, NodeList or HTMLCollection to attach the event handler to.
  • eventName: It specifies the event name of interest, being emitted by the target i.e. eventName you want to capture for example click, mouseover, etc.
  • options: It specifies the options to pass through to addEventListener. It is an optional argument. Its default value is undefined.
  • resultSelector: It is also an optional argument. Its default value is undefined. Type: (…args: any[]) => T.

Return value

The RxJS fromEvent() operator returns an observable.

Let us see some examples of the RxJS fromEvent() operator to understand it clearly.

Example 1 (Emits clicks happening on the DOM document)

Index.ts:

Index.html:

Output:

After executing the above example, you will see the following result:

RxJS fromEvent() Creation Operator

Example 2 (Observable from mouse clicks)

Index.ts:

Index.html:

Output:

After executing the above example, you will see the following result:

RxJS fromEvent() Creation Operator


Next TopicRxJS Operators

You may also like