Reacting to Change

Let's see how we can display the changing prices upon selecting different types of pizzas in a reactive application.

We'll cover the following

- Displaying changing prices
- Reactive price calculation for pizza ordering form

At some point, the customer needs to know how much all these pizzas will cost them.

Displaying changing prices

Observables let us react to user input to keep an updated total price on the page, but how do we recalculate the price only when relevant information is updated?

We know the entire form can be subscribed to with .valueChanges. We’ll use it for the individual form controls as well.

We can extract the properties of the form with this.pizzaForm.get(nameOfProperty). We’ll need an observable stream of all changes to pizzas, mapped through a function that calculates the total cost:

Get hands-on with 1400+ tech skills courses.

Course Introduction

Creating Observables

Manipulating Streams

Managing Asynchronous Events

Advanced Async

Multiplexing Observables

Using HTTP in Angular

Building Reactive Forms in Angular

Advanced Angular

Reactive Game Development

Reacting to Change

Displaying changing prices