How to add navigation menu in Angular 9 app?

In a single-page app, you change what the user sees 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.

As users perform application tasks, they need to move between the different views that you have defined.

To implement this kind of navigation within the single page of your app, you use the Angular Router.

To handle the navigation from one view to the next, you use the Angular router.

The router enables navigation by interpreting a browser URL as an instruction to change the view.

Generate an app with routing enabled

The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called AppRoutingModule, which is an NgModule where you can configure your routes.

The app name in the following example is routing-app.


ng new routing-app --routing

When generating a new app, the CLI prompts you to select CSS or a CSS preprocessor.

For this example, accept the default of CSS.

Add components for routing

To use the Angular router, an app needs to have at least two components so that it can navigate from one to the other.

To create a component using the CLI, enter the following at the command line where first is the name of your component:


ng generate component first

Repeat this step for a second component but give it a different name.

Here, the new name is second.


ng generate component second

The CLI automatically appends Component, so if you were to write first-component, your component would be FirstComponentComponent.

Import your new components

To use your new components, import them into AppRoutingModule at the top of the file, as follows:


//add this code to AppRoutingModule

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

Define a basic route

There are three fundamental building blocks to creating a route.

Import the AppRoutingModule into AppModule and add it to the imports array.

The Angular CLI performs this step for you.

However, if you are creating an app manually or working with an existing, non-CLI app, verify that the imports and configuration are correct.

The following is the default AppModule using the CLI with the –routing flag.


//AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Building block 1

Import RouterModule and Routes into your routing module.

The Angular CLI performs this step automatically.

The CLI also sets up a Routes array for your routes and configures the imports and exports arrays for @NgModule().


//app routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes constant where you define your routes

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Building block 2

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.


//AppRoutingModule

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

Building block 3

Add your routes to your application.

Now that you have defined your routes, you can add them to your application.

First, add links to the two components.

Assign the anchor tag that you want to add the route to the routerLink attribute.

Set the value of the attribute to the component to show when a user clicks on each link.

Next, update your component template to include router-outlet tag.

This element informs Angular to update the application view with the component for the selected route.


//add this to your html template

<h1>Angular Router App</h1>
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
  </ul>
</nav>
<!-- The routed views render in the <router-outlet>-->
<router-outlet></router-outlet>

Credit: Angular.io

Angular 9 app menu navigation Routing web

« Previous Next »