What is the difference?
As you see in your example, the main difference is to improve the readability of the source code. There are only two functions in your example, but imagine if there are a dozen of the functions? then it will go like
function1().function2().function3().function4()
it's really getting ugly, and difficult to read, especially when you are filling inside of the functions. On top of that certain editors like Visual Studio code doesn't allow more than 140 line length. but if it goes like following.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
This drastically improves the readability.
If there is no difference, why the function pipe exists?
The purpose of the PIPE() function is to lump together all the functions that take, and return observable. It takes an observable initially, then that observable is used throughout the pipe() function by each function used inside of it.
First function takes the observable, processes it, modify its value, and passes to the next function, then next function takes the output observable of the first function, processes it, and passes to the next function, then it goes on until all the functions inside of pipe() function use that observable, finally you have the processed observable. At the end you can execute the observable with subscribe() function to extract the value out of it. Remember, the values in the original observable are not changed.!!
Why those functions need different imports?
Imports depend on in where the function is specified in the rxjs package.
It goes like this. All the modules are stored in node_modules folder in Angular.
import { class } from "module";
Let's take the following code as an example. I have just wrote it in stackblitz. So nothing is automatically generated, or copied from somewhere else. I don't see the point of copying what stated in rxjs documentation when you can go and read it too. I assume you asked this question here, because you didn't understand the documentation.
- There are pipe, observable, of, map classes imported from the
respective modules.
- In body of the class, I used the Pipe() function
as seen in the code.
The Of() function returns an observable, that
emits numbers in sequence when it's subscribed.
Observable isn't subscribed yet.
When you used it likes Observable.pipe(), the pipe() function uses the given Observable as an input.
The first function, map() function uses that Observable, process it, return the processed Observable back to the pipe() function,
then that processed Observable is given to the next function if there is any,
and it goes on like that until all the functions process the Observable,
at the end that Observable is returned by the pipe() function to a variable, in the following example its obs.
Now the thing in Observable is, As long as the observer didn't subscribe it, it doesn't emit any value. So I used the subscribe() function to subscribe to this Observable, then as soon as I subscribed it. The of() function starts emitting values, then they are processed through pipe() function, and you get the final result at the end, for instance 1 is taken from of() function, 1 is added 1 in map() function, and returned back. You can get that value as an argument inside of the subscribe( function (argument) {} ) function.
If you want to print it, then uses as
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
