Creating a multi-step game with the CDK Stepper API

If you try finding examples of the CDK Stepper over the internet, you'll find a bunch of articles revolving around creating multi-step forms using the CDK Stepper API, but since it is a stepper at its base, it can be used for various use cases. In this recipe, we're going to build a guessing game using the Angular CDK Stepper API, in which the user will guess what the output of a rolled dice will be.

Getting ready

The project that we are going to work with resides in chapter09/start_here/using-cdk-stepper, inside the cloned repository. Proceed as follows:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, and you should see something like this:

Figure 9.13 – The using-cdk-stepper app running on http://localhost:4200

Now, let&apos...