Creating a multi-step game with the CDK Stepper API

If you try finding examples of the CDK Stepper API 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 app that we are going to work with resides in start/apps/chapter09/ng-cdk-stepper inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-stepper
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 9.13: The ng-cdk-stepper app running on http://localhost:4200...