Tutorial hero
Lesson icon

An Introduction to Observables for Ionic 2

Originally published February 27, 2017 Time 2 mins

Observables are one of those new tricky things you will almost certainly run into at some point when building an application with Ionic 2. They can seem a little weird and overwhelming at first, and you might wonder ”why can’t we just stick to promises?”, but they are quite beautifully implemented. At a basic level, you don’t need to worry about all of the advanced things observables can do or what “reactive programming” is, you will mostly just need to know a few basics like how to subscribe to an observable.

In this video tutorial, I cover the basic concept of observables and how they are relevant to an Ionic 2 application.

Here’s the video:

Video Notes

  • Observables are provided by the RxJS library – they are not specific to Ionic or Angular
  • Observables are somewhat similar to promises, but they can do a lot more
  • Observables can emit multiple values over time, rather than just resolving once
  • You can subscribe to an observable to do things with the data that it emits
  • Observables are “lazy” meaning that they won’t be executed until they are subscribed to
  • Multiple different operations can be applied to observables to modify the observable and return a new one
  • The first observables you will likely run into when building Ionic 2 applications is through the Http service, or through an Ionic Native plugin
  • You can create your own observables, but at a beginner level this will not likely ever be necessary
  • You can create your own observable using the following format:
let myObservable = Observable.create((observer) => {

myObservable.subscribe((data) => {
  • A Subject combines the observer/observable pattern into one easy to use method, which you may prefer to use for simple implementations
  • You can create a Subject with the following code:
let mySubject = new Subject();

mySubject.subscribe((data) => {

Learn to build modern Angular apps with my course