Using Observables in Ionic 3.9.x and Angular 5

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 file:

"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:

this.searchControl.valueChanges.pipe(debounceTime(700)).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 method:

this.searchControl.valueChanges
  .pipe(debounceTime(700), somethingElse())
  .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:

this.http
  .get('someurl')
  .pipe(map((res) => res.json()))
  .subscribe((result) => {
    console.log(result);
  });

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

Summary

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.