RxJS Ninja - New Operators for working with StreamsAPI
Tags: webdev, rxjs, angular, showdev
Published: 2021-01-14 00:13:39

---
title: RxJS Ninja - New Operators for working with StreamsAPI
published: true
description: New release of the RxJS Ninja Library
tags: webdev,rxjs,angular,showdev
canonical_url: https://tane.dev/2021/01/rxjs-ninja-updates-new-operators-for-math-and-working-with-streams/
---

Since the last update on [RxJS Ninja](https://rxjs.ninja) there have been a few new operators added, below are some details and links to StackBlitz demos showing them in action.

### Numbers and Math operators

In `@rxjs-ninja/rxjs-number` the missing [toFixed](https://rxjs.ninja/modules/number.html#tofixed) operator has been added, alongside a new custom [toHex](https://rxjs.ninja/modules/number.html#tohex) operator and the corresponding [parseHex](https://rxjs.ninja/modules/number.html#parsehex) one allowing hex numbers to be worked with (such as converting colours).

There are also new operators for some basic math - [add](https://rxjs.ninja/modules/number.html#add), [sub](https://rxjs.ninja/modules/number.html#sub), [div](https://rxjs.ninja/modules/number.html#div), [mul](https://rxjs.ninja/modules/number.html#mul), [mod](https://rxjs.ninja/modules/number.html#mod) and [pow](https://rxjs.ninja/modules/number.html#pow) all allowing you to modify source numbers, all accept a number, or an Observable number source.

### Working with Browser Streams

Some new operators have been added to `@rxjs-ninja/rxjs-utility` that allow interoperability between [RxJS](http://rxjs.dev)and the [StreamsAPI](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). These APIs are not in all browsers but there is an available [polyfill](https://www.npmjs.com/package/web-streams-polyfill).

#### `fromReadableStream`

This [operator](https://rxjs.ninja/modules/utility.html#fromreadablestream) accepts a [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) and provides the emitted values as an Observable, allowing you to use RxJS operators to work with the data.

* [Demo](https://stackblitz.com/edit/rxjs-readable-stream-fetch) - Using `fetch` body with `fromReadableStream` to show partial images
* [Demo](https://stackblitz.com/edit/rxjs-readable-stream) - A basic infinite number stream that ticks per second

#### `toWritableStream`

This [operator](https://rxjs.ninja/modules/utility.html#towritablestream) accepts a [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream).The operator emits the source value and also writes to the stream. The operator takes care of closing the writer when the Observable subscription is closed.

* [Demo](https://stackblitz.com/edit/rxjs-writable-stream) - Streams an Observable interval value into a `WritableStream` with optional ability to stop the writer without ending the Observable subscription.

#### `fromFetchWithProgress`

This [operator](https://rxjs.ninja/modules/utility.html#fromfetchwithprogress) uses `fetch` to do an HTTP request, instead of the body response it emits either a `number` which is the current progress, or a `Uint8Array` containing the final
response from the body.

* [Demo](https://stackblitz.com/edit/fetch-with-progress) Fetches an image and shows a progress bar with the current percentage and once complete shows the image.