Learn RxJS page

Learn RxJS by creating a validating credit card form.

Before You Begin

Click here to join
Bitovi's Slack Community

Join Bitovi's Slack Community to get help on Bitovi Academy courses or other Angular, React, CanJS and JavaScript problems.

Please ask questions related to RxJS and Angular in the Angular Chat Room.

If you find bugs in this training or have suggestions, create an issue or email contact@bitovi.com.

Video

Who has time to read? This video covers the content on this page. Watch fullscreen.

Overview

In this tutorial we will create the following validating credit card form:

See the Pen Angular + RXJS by Justin Meyer (@justinbmeyer) on CodePen.

This credit card form:

  • Validates input as a user types, but only once a user blurs an input element.
  • Enables the PAY button once the credit card information is valid.
  • Disables the PAY button and changes its text to PAYING while payment is being processed.
  • Logs a success message when payment has completed.
  • Simulates a payment with a Promise that resolves in 2 seconds.

We will use RxJS and Angular 6 for this example. All code examples will be able to work in a CodePen so you just need a browser to complete this tutorial!

Each section of the guide is broken down into the following sections:

  • The problem — A description of what the section is trying to accomplish.
  • What you need to know — Information about CanJS that is useful for solving the problem.
  • The solution — The solution to the problem.

Outline

Logic Flow

The following presentation shows how the observables are wired up. This will be a useful reference for understanding how the tutorial works:

Tips

  • Open Developer Tools and stack CodePen vertically:
    CodePen stacked
  • Save your CodePen
  • If you can't figure out what is breaking, use an online diff checker to compare your code with the solution.
    Diff Checker

Prerequisites

  • This guide makes a minor use of promises. A basic understanding of promises is required.
  • This guide makes a minor use of TypeScript. TypeScript knowledge is not required, but it might help to make sense of the solutions. The Learn TypeScript guide is more than sufficient background.
  • This guide uses Angular. However, most of the Angular parts are explained. Angular experience is not required; however, experience in some other modern web framework is required.