Writing Angular Without Learning RxJS [2021 / RxJS 7 Edition]

This article is part of the Ionic Framework / Capacitor / Stencil Advent Calendar 2021. With the RxJS 7 release, Writing Angular Without Learning RxJS is deprecated, so I rewrote and published this 2021 / RxJS 7 edition.

I sometimes hear things like “Angular is hard because you have to learn RxJS!” or “RxJS is hard to test, so I do not want to use it,” so I am writing down how to use Angular without learning RxJS.

Where Angular Uses RxJS

People often say “Angular uses RxJS,” but where exactly is it used?

When I say this, most people are surprised: “It is only installed in package.json.”^[1] RxJS is not written everywhere by default, and you do not have to understand all of it before you can keep working.

That said, a few Angular APIs use RxJS by default. The main one is HttpClient.

What Is HttpClient?

It is like ajax built on RxJS. You hit a URL and fetch a value. If you used jQuery ajax, you probably wrote something like this:

$.ajax({
  url:'https://example.com',
})
  .done( (data) => {
    // On success
  })
  .fail( (data) => {
    // On failure
  });

That becomes something like this:

this.http.get('https://example.com').subscribe(
  {
    next: (done) => {
      // On success
    },
    error: (fail) => {
      // On failure
    }
  }
);

With ajax you write done and fail; you use them the same way here. You just also have to write subscribe.^[2]

That is it.

No, really—I released apps with only this much knowledge.
RxJS has many APIs once you learn it, and you can do all sorts of convenient async processing with them, but in Angular the amount of code you “cannot write without RxJS” is about this much.^[3]

So if you think “Angular is hard because I have to learn RxJS,” that is probably a misconception. Think of it as a convenient package bundled with the framework, and feel free to get started lightly.

When You Do Not Want to Write subscribe Either

This section is for people who want Promise-based async/await. There are many approaches—using jQuery ajax, using the axios library, and so on—but here I will show how to convert RxJS-based HttpClient to a Promise.

import { firstValueFrom } from 'rxjs';

firstValueFrom(this.http.get('https://example.com'))

That alone turns RxJS into a Promise. You can use it like this:

import { firstValueFrom } from 'rxjs';

const f = firstValueFrom(this.http.get('https://example.com'));

f.then(data => {
  // Can be written in a Promise-like style
});

Of course you can use async/await too:

async get(){
  const f = await firstValueFrom(this.http.get('https://example.com'));
  console.log(f); // Contains the value after the Promise resolves
}

With that, RxJS is no longer a barrier to choosing Angular.

By the way, another common objection—“Angular has TypeScript, so...”—is also fading. Articles like “Writing React in TypeScript” appear regularly, and Vue.js officially supports TypeScript, so it is less something you avoid at the framework-selection level.

See you next time.