Using Observables in Ionic 3.9.x and Angular 5

综合技术 2017-11-15

Since Ionic has been using semantic versioning for their updates
, as long as the number at the beginning of the version number (i.e. 3.x.x) stays the same, then it means you likely won’t be dealing with any breaking changes that you need to update things in your application for. It also means that when you see the framework transition from 3 to 4, or 4 to 5, it doesn’t mean that the rug is being pulled out from beneath your feet – there will just be a few things that require updating. The next big update scheduled for Ionic, the 4.x update, will be the one that moves the framework over to web components

This most recent 3.9 update, however, is a little more significant than some of the more recent minor updates and patches. This update bumps the Angular framework version being used to the latest 5.x release. This new version of Angular comes with a range of improvements, including the usual behind the scenes updates to make it smaller and faster, and a range of other features as well. For a full list of the updates, you can take a look at this blog post from the Angular team

For the most part, you should still be able to upgrade your application without having to worry about making any changes. However, in this article, we are going to take a look at one of the more significant changes in Angular 5 which is an update to RxJS and Observables.

Upgrading to Ionic 3.9.x / Angular 5

Upgrading to the latest version is as simple as ever (assuming your project was up to date previously) just update your node_modules
to reflect the following versions by updating your package.json

"dependencies" : {
  "@angular/common": "5.0.0",
  "@angular/compiler": "5.0.0",
  "@angular/compiler-cli": "5.0.0",
  "@angular/core": "5.0.0",
  "@angular/forms": "5.0.0",
  "@angular/http": "5.0.0",
  "@angular/platform-browser": "5.0.0",
  "@angular/platform-browser-dynamic": "5.0.0",
  "@ionic/storage": "2.1.3",
  "ionic-angular": "3.9.0",
  "rxjs": "5.5.2",
  "zone.js": "0.8.18"
"devDependencies: {
  "@ionic/app-scripts": "3.1.0",
  "typescript" : "2.4.2"

If you’re working on an older project, then you may need to make your way through the changelog

Observable Changes

The way in which we use RxJS and Observables is the only big change you may notice in the code for applications. Your applications will continue to work even if you do not update to the new syntax that I am about to show you, but there are benefits to doing so. If you’re interested in the why
of this change and the kinds of benefits you can expect, this document
explains the reasoning in-depth.

For some context, let’s use an example from a previous tutorial on high performance list filtering

Our observables return values to us, but we can also chain methods onto those observables to modify the results that we get. In the case of that tutorial, we didn’t want to trigger the search every time a user typed a letter, we only wanted to trigger it when the user was done typing. Instead of immediately handling the result from the observable, we would wait for a period of time where the user had not typed for 700ms
. To do this, we used the debounceTime
operator, which looks like this:

this.searchControl.valueChanges.debounceTime(700).subscribe(search => {

    // do something here


In order to chain the debounceTime
method on an observable, we would need to import that operator to patch in the functionality:

import 'rxjs/add/operator/debounceTime';

However, this new update introduces something called “lettable operators” where we can import specific operators. We would instead import the operators like this:

import { debounceTime } from 'rxjs/operators/debounceTime';

and then to use the operator we would need to use the new pipe
method to run any operators that we want on the observable, like this:



).subscribe(search => {

    // do something here


Instead of chaining observables together, now we just call the pipe
method on the observable, and we supply it with any operators we want to apply. To apply multiple operators, you can just add additional operators to the pipe



).subscribe(search => {

    // do something here


You can also use this new method with the commonly used map
operator by importing the map
operator like this:

import { map } from 'rxjs/operators';

and then using it as follows:


    map(res => res.json())

).subscribe(result => {

But, for now at least, if you prefer to use the old syntax then that will continue to work fine.


If you’re using Angular 5 in your Ionic projects then it is a good idea to update to the latest syntax, but there isn’t really any urgency around it. You can continue to use the existing syntax but still get the other benefits of the Angular 5 update if you aren’t willing to do that just yet.

It’s good to understand these changes, though, as you will likely start seeing this syntax used by others now.

Josh Morony's Blog

责编内容by:Josh Morony's Blog (源链)。感谢您的支持!


Everything You Need to Know about Angular 5.0 One of the biggest problems Angular faces is market validation. It became instan...
How to Update Angular Projects to the Latest Versi... In this article, we’ll look at how to update Angular projects to the latest vers...
Angular start (ReferenceError: ... I am trying build frontend in my aplication ( java-ee ) using angularJS. I c...
AngularJS Console Debugging Tricks You’re working on a new feature, or trying to track down a bug. Something’s just...
Applying the Builder Pattern to Improve an Angular... Recently I was working on an Angular/Typescript service that was building ...