Using RxJS Observable and Operators in TypeScript

2 min readDec 21, 2016

Introduction

What is an Observable?

Observable is an array whose items arrive over time. They can be used to model asynchronous data streams such as DOM events, async requests and animations. They can also be transformed, combined, and consumed using array methods such as map, filter, reduce, forEach, etc.

What are Operators?

Operators apply certain transformations to the observable sequence. These transformations could be of any category, such as, creation, conversion, combine, functional, mathematical, time, exceptions, miscellaneous, selection and primitives.

Installation

npm install rxjs --save

Importing into your project

import { Observable } from 'rxjs/Rx';

Using Observables and Operators with Examples

Observable.from

This method creates a new observable sequence from an array of values.

Observable.of

Converts arguments to an observable sequence.

Observable.range

Generates an observable sequence of numbers within a specified range.

Observable.fromEvent

Creates an observable sequence from an event.

Observable.distinctUntilChanged

Creates an observable sequence without repeating values.

Observable.delay

Creates an observable sequence with a delay.

Observable.throttleTime

Creates an observable sequence that emits only the first value during a specified duration.

Observable.debounceTime

Creates an observable sequence that emits only the latest value after a specified duration.

Source code

A sample project using operators, fromEvent, distinctUntilChanged, delay, throttleTime and debounceTime is available below. Please feel free to try it out.