Skip to content
RxJS operators for Angular
TypeScript JavaScript
Branch: master
Clone or download

npm-badge   travis-badge   codecov-badge

ngx-operators is a collection of helpful RxJS operators for Angular apps.


Install via

npm i ngx-operators



Returns an Observable that mirrors the source Observable, but will call a specified function when it's being subscribed to.

prepare<T>(callback: () => void): (source: Observable<T>) => Observable<T>

callback: Function to be called when source is being subscribed to.


const source = of('value').pipe(
  prepare(() => console.log('subscribed'))
source.subscribe() // 'subscribed'

read more


Indicates whether the observable is currently loading (meaning subscription is active and it hasn't completed or errored).

indicate<T>(indicator: Subject<boolean>): (source: Observable<T>) => Observable<T>

indicator: Subject as target for indication


export class UserComponent  {
  loading$ = new Subject<boolean>()

  constructor(private userService: UserService) {}

  create(name = "John Doe"): void {
    this.userService.create(new User(name))
<button (click)="create()">Create User</button>
<div *ngIf="loading$ | async">
  Creating, please wait <loading-indicator></loading-indicator>

read more


Maps Angular HTTP status codes to more semantic errors.

throwForCodes<T>(codeErrors: {[status: number]: () => Error}): (source: Observable<T>) => Observable<T>

codeErrors: Object mapping HTTP codes to error providers

Example'/users', newUser).pipe(
    409: () => new Error('User already exists'),
    400: () => new Error('Invalid user')


Transform HTTP events into an observable download for indicating progress.

download(saver?: (b: Blob) => void): (source: Observable<HttpEvent<Blob>>) => Observable<Download>

saver: Function for saving download when it's done. This could be saveAs from FileSaver.js. When no saver is provided the download won't be saved by this operator.


export class AppComponent  {

  download$: Observable<Download>

  constructor(private http: HttpClient) {}

  download() {$ = this.http.get('/users/123/report', {
                           reportProgress: true,
                           observe: 'events',
                           responseType: 'blob'
                         }).pipe(download(() => saveAs('report.pdf')))
<button (click)="download()">Download</button>
<mat-progress-bar *ngIf="download$ | async as download"
  [mode]="download.state == 'PENDING' ? 'buffer' : 'determinate'" 

read more


Ignores 404 error responses by instead completing the underlying observable.

Note: You can use defaultIfEmpty to provide a fallback value.

ignoreNotFound(): (source: Observable<T>) => Observable<T>


export class AppComponent  {
  user$: Observable<User>

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.user$ = this.http.get<User>('/users/123').pipe(
You can’t perform that action at this time.