Observables are lazy Push collections of multiple values
Let’s simplify it: an observable in RxJs is an object that emits a sequence of values or errors over time.
It acts like a stream of data, where values can be pushed or pulled as needed.
Angular uses Observables
Most of the Angular services and features are exposed as Observable.
Below are some examples where we subscribe to Observable:
When we make an HTTP request using HttpClient.get
Listen form or input changes using the form/input.valueChanges property
Monitoring router.events
Http Interceptors
The Output emitter in Angular components is an observable too
When we say that an Observable emits data, we mean that it sends a value to its subscribers at a specific point in time.
Unlike a simple function that returns a value immediately upon being called, an Observable can produce multiple values over time.
The Promises , which many people often mistakenly compare with the observables,
can instead only emit one value.
Examples in Angular
When we make an HTTP request subscribing the http.get() function, the response represents the emission of the Observable.
When we subscribe the valueChanges property of a reactive form, the input field will emit a value in the Observable every time we type something into it
the router emits values in the router.events property that is an Observable
...
So it's not important what type of data the Observable is emitting. You can just subscribe it, listen for its emitted values and "react" doing some actions, run side effects, populate a state or something else.
In this example we use the interval operator provided from 'RxJS' that emits sequential numbers at regular intervals of time (every second, since we set 1000 ms as interval parameter).
interval is an RxJS creation operator, described after this paragraph. We'll use it very often in this introduction since it's one of the easy way to create an Observable that emits data over time.
The subscribe function is used to subscribe (listen) this observable and wait for the emitted values: a counter that starts from zero, then emits the value 1, 2 and so on, every second.
index.ts
We can also use arrow syntax to be more concise:
index.ts
Or, in this scenario where we simply print the emitted value, ever more concise:
Although it is possible to manually create a new instance of an Observable...
... they are usually never created manually but we use special functions, called Creation Operators, that create them for us.
These type of operators allow you to easily generate Observables from different types of inputs, such as arrays, promises, events, timers or even custom logic.
We already used the interval creation operator in the previous example but let’s look at other available operators:
of
Emit values (aka next notifications) in a sequence and then emits a complete notification:
You'll learn what are notifications in the next lesson.
ajax
ajax creates an observable from an Ajax request and returns the response.
RxJS provides an ajax operator that has several functions to make HTTP requests:
We have used the GET method but we can also use POST, PUT and so on ...
The corresponding in Angular is the HttpClient service:
fromEvent
fromEvent creates an Observable from en event (MouseEvent, KeyboardEvent, ... ).
Run the example and click in any part of the viewport to see the output in the console:
index.ts
index.html
index.ts
index.html
The Angular input.valueChanges Observable works very similar to the fromEvent operator, emitting values each time someone type something into an input, or in a form:
Others
There are several other "creation operator" but now it is not important to know all of them.
The key is to understand how Observable work and then over time you will start to know the various operators and choose the most appropriate based on the context.
An Observer is an object that defines the behavior when receiving notifications from an Observable.
We have already used observers in the previous snippets, but in a simplified version:
The previous example can be also written using the observer object:
An Observer is an object that defines 3 properties: next, error and complete.
For each property we also define a function that we'll be invoked in some scenarios:
next: when the Observable emits a value.
error: emitted when an error has occurred during the Observable's execution.
complete: indicates that the Observable has finished emitting all its values.
Don't worry if you still don't understand what next, error and complete are.
They are known as Notifications and we'll talk about them in the next lesson.
Here is the syntax to use the full Observer object:
We can rewrite the interval example using the Observer object:
