Piping Data Through Operators

Let's see how you can use an operator in the pipe() method to manipulate data in the observable stream.

We'll cover the following

Operator and .pipe method

An operator is a tool provided by RxJS that allows you to manipulate the data in the observable as it streams through.

You can import operators from 'rxjs/operators'. To use an operator, pass it into the .pipe method of an observable.

Here, the fictional exampleOperator is used for illustration:

import { interval } from 'rxjs';
import { exampleOperator } from 'rxjs/operators'; 
interval(100) 
 .pipe( 
   exampleOperator() 
);

💡 In previous versions of RxJS, operators were methods attached directly to the observable. This made it difficult for bundling tools like Webpack to determine which operators weren’t needed in the production bundle. With RxJS v6, only needed operators are imported, allowing a bundler to ignore the rest, resulting in a smaller bundle.

Get hands-on with 1400+ tech skills courses.