Create observable from a string, array & object in angular

In this tutorial, we will show you how to create observable using create, of, from operators in Angular. We can use them to create new observable from the array, string, object, collection or any static data. Also learn the difference between the Of & From operators. If you are new to observable, we recommend you to read the Angular observable before continuing here.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Observable creation functions

There are many ways to create observable in Angular. You can make use of Observable Constructor as shown in the observable tutorial. There are a number of functions that are available which you can use to create new observables. These operators help us to create observable from an array, string, promise, any iterable, etc. Here are some of the operators

  • create
  • defer
  • empty
  • from
  • fromEvent
  • interval
  • of
  • range
  • throw
  • timer

All the creation related operators are part of the RxJs core library. You can import it from the ‘rxjs’ library

Create

The Create method is one of the easiest. The create method calls the observable constructor behind the scene. Create is a method of the observable object, Hence you do not have to import it.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Observable Constructor

We looked at this in the previous tutorial. There is no difference between the Observable.create method and observable constructor. The Create method calls the constructor behind the scene.

Of Operator

The Of creates the observable from the arguments that you pass into it. You can pass any number of arguments to the Of. Each argument emitted separately and one after the other. It sends the Complete signal in the end.

RxJs Observable Of Operator in Angular

To use of you need to import it from rxjs library as shown below.

observable from an array

Example of sending an array. Note that the entire array is emitted at once.

You can pass more than one array

observable from a sequence of numbers

In the following example, we pass 1,2 & 3 as the argument to the from. Each emitted separately.

observable from string

We pass two strings to the of method. Each argument is emitted as it is.

observable from a value, array & string

We can pass anything to the Of operator. It justs emits it back one after the other.

From Operator

From Operator takes only one argument that can be iterated and converts it into an observable.

You can use it to convert

  • an Array,
  • anything that behaves like an array
  • Promise
  • any iterable object
  • collections
  • any observable like object

It converts almost anything that can be iterated to an Observable.

RxJs observable from operator in Angular

To use from you need to import it from rxjs library as shown below.

observable from an array

The following example converts an array into an observable. Note that each element of the array is iterated and emitted separately.

Observable from string

The from operator iterates over each character of the string and then emits it. The example is as shown below.

Observable from collection

Anything that can be iterated can be converted to observable. Here is an example using a collection.

Observable from iterable

Any Iterable types like Generator functions can be converted into an observable using from the operator.

Observable from promise

Use it to convert a Promise to an observable

Of Vs From

Offrom
Accepts variable no of argumentsAccepts only one argument
emits each argument as it is without changing anythingiterates over the argument and emits each value

References

Summary

We can use the Create method or Observable Constructor to create a new observable. The Of operators is useful when you have array-like values, which you can pass it as a separate argument to Of method to create an observable. The From Operate tries to iterate anything that passed into it and creates an observable out of it. There are many other operators or methods available in the RxJS library to create and manipulate the Angular Observable. We will learn a few of them in the next few tutorials

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top