Using RxJS Observable and Operators in TypeScript

Introduction

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.

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

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

Converts arguments to an observable sequence.

Generates an observable sequence of numbers within a specified range.

Creates an observable sequence from an event.

Creates an observable sequence without repeating values.

Creates an observable sequence with a delay.

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

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.

A GIF of the app output is shown below.

API Reference

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

--

--

--

Web developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joel George V

Joel George V

Web developer

More from Medium

How to Use Spectator to Test your Angular Components

Why to and How To Use Strict Mode in Angular Applications

Piles of stacked rocks

React to Angular: Use Redux for State Management in Angular with TypeScript Part 2. NgRx store

An Introduction to LifeCycle hooks in Angular