Angular 14 Tutorial- Routing & Navigation Services Tutorial

Angular Routing and Navigation Tutorial; We will learn in this tutorial how we can work with Routing & Navigation in an Angular web App.

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

Routing helps us navigate between different web pages. Until now, we have already been to several websites with links pointing to another page.

We will be directed to a new page when we click on those links. This is done with the help of routing. The pages that we refer to will be in the form of components here.

 

Angular 14 Routing Example

  • Introduction to Angular Routing
  • Generate Angular Components for Routing & Navigation
  • Setup Router Service for navigation
  • Activate Router Service within the Angular Template

 

Generate Components

Here, we will create a component right now and see how we are going to achieve routing with it:

ng g c home
ng g c about

 

Setup Router Service for Navigation

Now, we will generate an app routing module for navigation using the below-mentioned command:

  • -flat adds the file in the src/app instead of its own folder.
  • module=app orders the Angular CLI to register it in the imports array of the AppModule:
ng generate module app-routing --flat --module=app

 

Once the app-routing module is created, then we go to the src > app > app-routing.module.ts file and add the given code:

app-routing.module.ts

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 the RouterModule. forRoot accepts inputs as an array.It also contains the object of the component and path. A class is named component and a router is named path. We are referring to the components within the app-routing.module.ts.

Here, we will go to the src > app > app.module.ts and add the following code to the 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 the Home and About link. We are going to use the given tags.

  • router=”inject component’s path here”
  • routerLinkActive=”inject active class here”

app.component.html

Further, we will go to the 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>

 

Afterward, we will see the given output in the browser:

Angular Router Service Output

 

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

 

it’s particularly helpful when we are dealing with heavy content on the page.

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

 

Conclusion

So, friends, in this Angular guide, we have learned about the routing and navigation services in an Angular app.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *