Reacting to Change

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

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 1200+ tech skills courses.