A deep dive into Angular routing

This section will teach you about the Angular router, a powerful tool that handles navigation in your Angular applications. The router is responsible for seamless transitions without full page loads, updating the browser URL, as well as handling route data, redirects, query parameters, path parameters, route resolvers, and guarding routes from unauthorized visitors.

Let’s start by creating two new components we can navigate to.

Creating new components

We are going to use an Nx generator for this. You can write a custom generator, but I will use the built-in component generator for now. Right-click on the app folder inside your expenses-registration folder and select the Nx console. In the dropdown, search for component and select @nx/angular - component.

Follow these steps to generate the necessary components:

1. In the name* input field, enter pages/expenses-overview-page.
2. Check the standalone checkbox.
3. Click Show all...