How to create navigation in Angular 9 Application using Angular Router

This article will demonstrate the proper way to create page navigation leveraging routing features provided by the Angular 9 framework.

1 — Create a new Angular 9 application

First let’s create a simple Angular 9 application which we will use for the demonstration purposes of how to create page navigation.

If you want a detailed step-by-step tutorial showing you how to create a new Angular 9 application, I have written an article that details the process. You can see it here:

How to start a new Angular 9 Project in few easy steps

Run the following command in you VScode terminal:

ng new Navigation

and follow the prompts on the screen. When prompted with the following question:
“Would you like to add Angular routing? (y/N)”
You need to choose the yes option. This will include the AppRoutingModule and imports it into the AppModule of the Angular application. If you accidentally chose no, you can always add it after the fact via the CLI using the following command:

ng generate module app-routin --flat --module=app