Working with nested menus using the Angular CDK Menu API

Menus are vital for so many applications we use today. The pattern of having a menu itself allows us to have experiences that don’t take up space in the DOM all the time and can be shown relative to their triggers on demand. In this recipe, you’ll learn how to create nested menus using the Angular CDK APIs.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-menu 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-menu
   

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

   

   Figure 9.17: The ng-cdk-menu app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next...