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.

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

2 — Test

As noted previously, the AppRoutingModule is automatically included in the app.module.ts file. This makes the AppRoutingModule available application wide. In the screenshot below you will notice that the AppRoutingModule is included in the imports inside the @NgModule decorator.

3 — Create multiple components in our application

To have a working example that properly demonstrates navigation between multiple components/pages we need to create components in our application. Let us create the following three components:

  • About Us
  • Contact Us
ng g c home
ng g c aboutus
ng g c contactus
  • home component
  • aboutus component
  • contactus component

4 — What are the Fundamental building blocks for routes

In Angular 9 there are three fundamental building blocks to creating a route.

  1. Define your routes in your routes array
    Each route in this array is a JavaScript object that contains two properties. The first property, path, defines the URL path for the route.
    The second property, component, defines the component Angular should use for the corresponding path.

5 — Setting up the routes in our application

Now that we have a quick understanding of the fundamental building blocks for routes in Angular let’s set up our routes for the components that we have created.

const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
{ path: "aboutus", component: AboutusComponent },
{ path: "contactus", component: ContactusComponent },
{ path: "*", component: HomeComponent },
];

6 — Create navigation menu and set up the router-outlet on the AppComponent

In order to make navigation work we need to create the navigation menu and add the router-outlet component.

<ul>
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/aboutus">About Us</a>
</li>
<li>
<a routerLink="/contactus">Contact Us</a>
</li>
</ul>
<router-outlet></router-outlet>

7 — Build and run the application

At this point we should have a running application with proper routing/navigation. To test our implementation we need to build and run our Angular application. Run the following command in the application Terminal:

ng serve -o

8 — How to append a parameter to your route?

To add a parameter to a route in our angular application we must add a new entry in the Routes array. To demonstrate this, let’s work with the following example: Let us assume that the Contact Us page can be loaded with and without a parameter. If a parameter “id” is provided in the URL, then we will display the provided parameter on the screen; otherwise we will not display/print to the screen the parameter.

{ path: "contactus/:id", component: ContactusComponent }
<li>
<a [routerLink]="['/contactus', 123]">
Contact Us with parameter</a>
</li>

9 — Conclusion

To conclude I would like to mention that in a single-page app, you change what the user sees simply by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. In order to make this feasible Angular made it easy by leveraging the Router.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store