Angular 16 Routing & Navigation Services Tutorial

Last Updated on March 4, 2024 by Digamber in Angular

Angular routing and navigation tutorial; I am going to share with you How you can work with Routing and Navigation in Angular web application.Routing helps you navigate between diffrent web pages. We are sure, up until now, you have already been to several websites with links pointing to another page.

When you click on those links, you will be directed to a new page. You get it done with the help of routing. The pages that you refer will be in the form of components here.

We are going to create components and see how we are going to achieve routing with it.

In order to remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

Angular 16 Routing Example

Introduction to Angular Routing
Generate Angular Components for Routing & Navigation
Setup Router Service for Navigation
Activate Router service within the Angular template

Set up Angular Project

Install the Angular CLI with below command.

npm install @angular/cli -g

Now, you have to install the brand new Angular project using below command.

ng new angular-demo

Angular CLI asks for your choices while setting up the project…

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose SCSS and hit Enter

Use command to navigate into the project directory:

cd angular-demo

Generate Components

We are going to create a component right now and see how we are going to achieve routing with it.

ng g c home

ng g c about

Head over to app-routing.module.ts file and add the given below code to the file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// RouterModule & Routes activate routing service in Angular
import { RouterModule, Routes } from '@angular/router';

// Include components for which router service to be activated
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

// Routes array define component along with the path name for url
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    CommonModule, 
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})

export class AppRoutingModule { }

forRoot is referred by RouterModule.

forRoot accepts inputs as an array. It also contains the object of the component and path.

A class is named component and router is named path. We are referring to the components within the app-routing.module.ts.

Go to src > app > app.modules.ts and add the following code into app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Components
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

// AppRoutingModule registered by Angular CLI
import { AppRoutingModule } from './/app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // Inject AppRoutingModule into imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Activate Routing in the Angular

Now we are going to display the component’s data whenever the user clicks on Home and About link. We are going to using given below tags.

routerLink=”inject component’s path here”
routerLinkActive=”inject active class here”

app.component.html

Go to app.component.html file and use the below code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse justify-content-center">
    <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link" routerLink="/home" routerLinkActive="active">
          Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">
          About
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- 
  Use "<router-outlet></router-outlet>" for navigating 
  between the components for which router service is activated.
-->
<div class="container text-center" style="padding: 30px 0">
  <router-outlet></router-outlet>
</div>

The following command will start a development server, compile and run your app.

ng serve --open

http://localhost:4200/home is part of the URL. As you can see, the home and about component is attached to the original URL.

As far as the original URL is concerned, it is the router-link in the app.component.html and the path given in the app.module.ts.

Next up, we are going to check out the output shown on the browser.

The page is not refreshed when a user clicks on home or about link. Contents will be shown to the user without any reloading. Only certain parts of the code will be reloaded when clicked.

It is particularly helpful when you are dealing with heavy content on the page.

When you have to reload heavy content multiple times, it can be a taxing experience for the user and the server. In short, this feature provides great user experience as users don’t have to go through reloading.