In the previous articles we tried to understand what an observable is and how it works and how it behaves in case of different scenarios. We looked at how to handle errors in observables and also learnt that observables end.

Here in this article we go in depth about how to create an observable .

RxJs has quite a few methods to create an observable and we will be going through a few of them in this article.

Create

Lets start with the create Operator, the one we used in the previous articles to create an Observable.

As Stated in documentation “ Rx.Observable.create is an alias for the Observable constructor” is the best way to describe it.

The syntax of this method is pretty straight forward , it takes a single function as input , which in turn is passed the observer which can emit values with .next() , throw errors with .error() and complete with .complete() .

Often It is difficult to use create method to create a complex observable. So we have many more so called creation operators which makes using observables very simple and easy.

Of

First comes Of operator, probably the simplest creation operator of all.

This operator creates an Observable that emits the values you specify as arguments , immediately one after the other, and then emits a complete notification.

Using it is also very simple.Check out the example below.

FromEventPattern

Next comes FromEventPattern that creates an Observable from an API based on addHandler/removeHandler functions.

The FromEventPattern method takes two arguments one is addHandler and the other is removeHandler .The addHandler is called when the output Observable is subscribed, and removeHandler is called when the Subscription is unsubscribed.

The Syntax of this method is as follows

FromEvent

FromEvent method creates an Observable that emits events of a specific type coming from the given event target.

For example you can use this method to create an Observable from DOM events, or Node EventEmitter events or others.

You can say it is syntactic sugar for the FromEventPattern to handle the cases of Dom Events and Node EventEmitter .

This method takes two arguments one is the target (like a dom element) and an eventName .The event handler is attached when the output Observable is subscribed, and removed when the Subscription is unsubscribed.

Syntax of the FromEvent is as follows

FromPromise

FromPromise method simply converts a promise in to an Observable .It returns an Observable that just emits the Promise’s resolved value, then completes.

This methods takes a promise as an input.

Interval

Interval creates an Observable that emits sequential numbers every specified interval of time.It starts with 0 and it never ends.

This method takes Time Interval at which the number are to be emitted in ms.

Range

Range creates an Observable that emits a sequence of numbers within a specified range. Range operator emits a range of sequential integers, in order, where you select the start of the range and its length .

This methods takes 2 arguments one is the start and the other is length of the sequence.

Syntax of range observable goes something like this.

Timer

Timer creates an Observable that starts emitting after an initialDelay and emits ever increasing numbers after each period of time thereafter.

If the second argument is not passed it just emits 0 after the initial delay and completes.

The Syntax os Timer goes as follows.

There are few Utility creation operators that are used in conjunction with other operators to handle certain cases. Some of them are listed below.

Empty

empty operator works exactly as its name suggests.It emits no values and immediately emits a complete notification.

You can use it as shown below

Throw

Similarly Throw method is used to throw an error and do nothing.

Its syntax is similar to empty .

Never

Similarly Never method does nothing actually it never emits any value, nor throws error nor completes.

These are some of the operators to create observables .However there are even more methods to make those. These methods are probably enough to handle most of the cases you may probably encounter.

The Images are from Official RxJs Docs. You can check them here.