Build Reactive Websites with RxJS

Creating Your Own Operator

So far, you’ve used operators provided by the RxJS library. However, you shouldn’t be limited to those. With pipe, creating your own operators is easier than ever. An operator is a function that takes an observable, manipulates it in some way, and returns that new observable. This might be a bit complicated, so let’s look at some code. In this simple case, an operator is created that appends a string to each value passed through the observable.

vanilla/canvasAnimation/operator-complete.ts

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

let stringAppendOperator = string => { 
  return obs$ => { 
    return obs$
    .pipe(map(val => val + string));
  };
};

let myObservable$ ...