--- title: "Observable's pipe" date: "2026-04" category: "Angular" tags: ["Angular"] description: "It's like a pipe that intercepts things partway through, the middleware of an Observable, you could say. It has RxJS handling methods predefined inside, which let us hold back the returned result and preprocess it the way I want..." source: "https://enriquemark.com/en/posts/Observable%E7%9A%84pipe" --- It's like a pipe that intercepts things partway through, the middleware of an `Observable`, you could say. It has RxJS handling methods predefined inside, which let us hold back the returned result and preprocess it the way I want. And here it's literally what the name says: think of the stream of information as water, and pipe is the filter stuck in the middle. The water goes through once and comes out treated, and the whole stream has to pass through it. The handling of the stream here gets abstracted into segments: stream A comes in, gets handled, leaves; stream B comes in, gets handled, leaves. Marble Diagrams in the official docs express exactly this. The whole process looks a lot like an array, each element (a slice of the stream) handled on its own and let through once it's done. So `map` becomes easy to understand: `map(i => i + 1)`. The `map` here is absolutely not working on an array, it's working on stream slices, and `i` is one of those slices, not an array element. Once you get that, you'll see that a lot of methods that look like they're operating on a `list` (`filter` is another one) stopped being the original version long ago. What pipe actually operates on is always the `Observable`, and only an Observable can be handled as a stream. An array deals with multiple elements in space, and a pipe deals with consecutive elements in time. At the level of abstraction there isn't much difference between the two. And a pipe gets defined before the data arrives. If `subscribe` is turning the water on, the filter has to be in place before that. Looking at it through water and pipes, Cold Observable and Hot Observable get much easier to understand too. The first one is a one-off supply: whoever `subscribe`s, I run water for them once, and every time it has to go pump from the source, then shuts off when it's done. The second is different. It's a continuous supply that runs the whole time once you start it, and anyone can draw from it without having to tell the source to pump again each time. Put that on IO and it's the difference between one IO and repeated IO. If a thousand people want one piece of data, the first hits the backend a thousand times, the second only needs to do it once and the rest take what they need. The second is really just standard publish-subscribe. Since the data is a single thing rather than something different every time, you only need to publish once, and whoever comes later can subscribe and get the result instead of firing off a request each time. Besides `map`, pipe has over a hundred `Operator`s. For the more common ones see the RxJS cheat sheet. Memorizing all of them is pointless, just look them up when you need them. --- **Translation note.** I wrote this in Chinese. This English version is an LLM translation, so the wording is not mine even though the thinking is. Original: [Observableçš„pipe]().