YogeshChauhan . com

How to add navigation menu in Angular 9 app?

in Angular on September 9, 2020

In-app navigation

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.


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';

  declarations: [
  imports: [
    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
  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.


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) -->
    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
<!-- The routed views render in the <router-outlet>-->

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to concatenate variable with string in Swift?SwiftWordPress: How to find all posts from a custom post type with specific custom field?WordPressHow does @extend rule work in SCSS (Sass)?SCSSHow to change value of a span tag using a reference from another div using jQuery?jQueryHow to detect if browser supports WebP format on server side PHP script?PHPThe difference between isFinite() method and isFinite() function in JavaScriptJavaScript