Pipe vs Subscribe in Angular

Question

I hope everyone just doing fine. Can, please someone clearly explains which one to choose among pipe and subscribe, and why? when it comes to not only getting the response but also to initialize some other variables or make changes to the boolean variables.

Also have a look at the code. Is it the right way to do it?

public getAlbums(){
    this.enableLoader = false;
    this.albumHttpService.getAlbums()
        .pipe(
            map((response) => {
                this.enableLoader = false;
                if (!response.albums.length) {
                    this.noDataSet = true;
                    if (response.albums === null) {
                        this.list = [];
                    }
                }
                else{
                    this.noDataSet = false;
                    this.list = response.albums;
                }
            }),
            catchError((error) => {
                this.noDataSet = false;
                this.data = [];
                throw new Error(error);
            }) 
        )
        .subscribe();
}

Thanks in advance

They are totally different from each other, its like comparing oranges and apples. `pipe` allows you to chain multiple rxjs operators while `subscribe` as the name suggests retrieves data from an observable. — Nicholas K, Apr 19 '20 at 18:01

score 19 · Answer 1 · answered Apr 19 '20 at 19:49

Pipe basically takes the output of the function and gives it as input to another function. It is a really great and efficient way to manipulate data and it is really powerful.

We are basically piping the output of something into a different function that can modify the incoming data or just to extra logic on top of the data (trigger side effects).

We can have multiple logics chained in the pipe operator.

Subscribe is called on an observable to subscribe to the final data that is pushed out from the observable.

Quick Example: I have an observable which sends a string "World".

worldObservable$.pipe(
  tap(data=>console.log(data)), // Prints "World"
  map(data=> `Hello ${data}`)
)
.subscribe(data=>console.log(data)); // Prints "Hello World"

In this example, first I use tap to get the data and then log it. Next, I modify the data using the map operator which changes the initial data. When I then subscribe it logs the modified data, instead of the initial data.

I hope it gave you some more clarity.

Correct me if I'm wrong, but I think the significant words in this answer are "side effects". If all you want to do is get the information from your observable, you subscribe to it, if you want to manipulate it on its way to that subscription (side effects), you insert a pipe and use any of the operator functions that allows. Sound about right? — Scala Enthusiast, Sep 27 '22 at 11:20

score 11 · Accepted Answer · answered Apr 19 '20 at 18:00

11

Within pipe you can concatenate many other functions and use these functions to write some logic, prepare the data for the view and etc.

subscribe is like the last point, where you get ready data and it is better not to write any logic there, just only assignments to your viewmodels or etc.

answered Apr 19 '20 at 18:00

Suren Srapyan

66,568
14
114
112

Thank you. here's a quick question, if I am getting you right then the above code snippet is fine and the logic goes to the pipe function. right? – unknown user Apr 19 '20 at 18:05
@unknownuser Yes, it is good. But also you need to consider a fact, that you call an extra function. So if you have many items it can delay you – Suren Srapyan Apr 19 '20 at 18:11
@SurenSrapyan could you explain *why* logic in `pipe` is better? What is the benefit? Why not directly subscribe to the original observable and alter + assign everything there? – N4ppeL Jul 29 '22 at 14:22

Pipe vs Subscribe in Angular

2 Answers2