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

README.md

npm-badge   travis-badge   codecov-badge

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

Installation

Install via

npm i ngx-operators

Operators

prepare

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.

Example

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

read more

indicate

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

Example

@Component({...})
export class UserComponent  {
  loading$ = new Subject<boolean>()

  constructor(private userService: UserService) {}

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

read more

throwForCodes

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

this.http.post('/users', newUser).pipe(
  throwForCodes({
    409: () => new Error('User already exists'),
    400: () => new Error('Invalid user')
  })
)

download

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.

Example

@Component({...})
export class AppComponent  {

  download$: Observable<Download>

  constructor(private http: HttpClient) {}

  download() {
    this.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'" 
  [value]="download.progress">
</mat-progress-bar>

read more

ignoreNotFound

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>

Example

@Component({...})
export class AppComponent  {
  user$: Observable<User>

  constructor(private http: HttpClient) {}

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