Creating Our Navigation Component
Let's create a navigation component for our Client Contacts Manager application and move the toolbar to this component.
We'll cover the following...
Now that we know more about Routes, the RouterModule, and how to structure a route, it’s time to put what we’ve learned into practice. In this section, we will add a new component to our Client Contacts Manager application. This will be the navigation for the application. First, though, we need to look at the component Angular Material provides to decide what layout and approach we will use.
Angular Materials components
If we go to the Angular Material website again, under the Components section, you’ll see the different components.
We could use the following three components for our menu, as follows:
Menu component
The Menu component gives us a floating menu, which has the links in the menu open below the menu item. You might use this if you have a complex application that has many sections with subsections that you want a user to be able to access.
Sidenav component
The Sidenav gives us a side draw layout where the menu slides out from the side when the user has clicked a menu icon. This is a common navigation system for applications that need to work on both the web and mobile. The Angular website uses this type of navigation.
Toolbar component
The ...