Angular - Routing

---

---

What is Routing?

Routing is a technique or mechanism that allows you to define paths to navigate through different components (individual pages such as home, about, content, dashboard, etc.) in the entire application.

In addition, navigation is an important aspect of a web application design. Although a single-page application (SPA) does not have a multiple-page concept, it does move from one view (list of expenses) to another view (expense details). Providing clear and understandable navigation elements decides the application's overall success.

Routing in Angular

In Angular, routing is one of the key features that defines the paths for various components and allows developers to create a Single-Page Application (SPA). A SPA does not require reloading the main page for internal changes, such as deleting something or navigating from one component to another.

Angular provides an extensive set of navigation features to accommodate both simple and complex scenarios. "The process of defining the navigation elements and the corresponding views is called routing". Angular offers a separate file with name app.routes.ts (and RouterModule in older version), to set up the navigation in the Angular application.

The following diagram will give you a clear understanding of how routing works in Angular when the user clicks on a link to navigate to a different component:

Configure Routing

To configure routing in our Angular application, the Angular CLI (command line interface) provides comprehensive support for setting up routing both during the application creation process and while working on an existing application.

Let's create a new application with routing enabled using the command below:

ng new routing-app --routing

Even if you do not provide the --routing flag in the above command, the Angular CLI will generate a new file named app.routes.ts by default while creating a new application, as shown in the code below:

import { Routes } from '@angular/router';

export const routes: Routes = [];

Here,

• Imports Routes from '@angular/router' package.

• Routes provides functionality to configure and execute routing in the application.

• Routes is the type used to setup the navigation rules.

• Routes is the local variable (of type Routes) used to configure the actual navigation rules of the application.

Angular CLI include the generated Routes in app.config.ts file as mentioned below −

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration()]
};

Here,

The app.config.ts file imports the Routes using imports meta data.

Angular CLI provides an option to set routing in the existing application as well. The general command to include routing in an existing application is as follows −

ng generate module my-module --routing

The above command will generate a new module with routing features enabled as follows:

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

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyModuleRoutingModule { }

To enable the routing feature in the existing module (AppModule) in older versions of Angular, follow the steps below. Note that the latest versions of Angular do not include the app.module.ts file due to the new standalone features:

ng generate module app-routing --module app --flat

Here,

--module appconfigures the newly created routing module,AppRoutingModulein the AppModule module.

Now, Let's configure the routing inour ExpenseManagerapplication.

Step 1: Open the node.js command or terminal in your IDE (such as VScode) and go to the application root folder:

cd /go/to/expense-manager

Step 2: Generate a routing module using the command below (if the app.routes.ts file does not exist, or else follow step 3):

ng generate module Route --routing

Once the above command executes successfully, it will display:

CREATE src/app/route/route-routing.module.ts (258 bytes)
CREATE src/app/route/route.module.ts (290 bytes)

Here,

CLI generatesRouteRoutingModule, and then configures it inthe route.module.tsfile as shown below:

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

import { RouteRoutingModule } from './route-routing.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouteRoutingModule
  ]
})
export class RouteModule { }

Creating Routes

Creating a route in angular is very simple and easy. Open the app.routes.ts file (if it does not exist, create it using the above command) and define the path for the individual components as follows:

Step 3: Open the app.routes.ts file and place the below code:

import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
    {path: 'about', component: AboutComponent}
];

Here,

• Routes is a variable (or an array) that contains multiple routes for various components.

• about is the path, and the AboutComponent is the target or destination component. When a user requests http://localhost:4200/about, the path matches the about rule, and then AboutComponent will be called.

Accessing Routes

Let's learn how to use the configured routes in an Angular application. In Angular, accessing routes involves a two-step process as follows:

1. Includethe router-outlettag in the root component template (i.e., app.component.html file):

<router-outlet></router-outlet>

2. Use routerLink (it is similar to href property) property in the required place.

<a routerLink="/about">About</a>

Here,

• routerLink set the route to be called using the path.

Note: Make sure that the RouterModule should be imported in the component (such as dashboard) where you are using the above code as:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  //here
  imports: [CommonModule, RouterModule],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {

}

Sometimes, we need to access routing inside the component instead of the template. Then, we need to follow below steps −

Inject instance of Router and ActivatedRoute in the corresponding component.

import { Router, ActivatedRoute } from '@angular/router'; 
constructor(private router: Router, private route: ActivatedRoute)

Here,

• Router provides the function to do routing operations.
• Route refers the current activate route.

Use the routers navigate function.

this.router.navigate(['about']);

Here,

The navigate function expects an array with necessary path information.

Using Relative Path

A route path is similar to a web page URL and supports relative paths. To access AboutComponent from another component, such as HomePageComponent, simply use the dot (.) notation as you would in a web URL or folder path.

<a routerLink="../about">Relative Route to about component</a>

To access the relative path in the component −

import { NavigationExtras } from '@angular/router'; 
this.router.navigate(['about'], { relativeTo: this.route });

Here,

The relativeTo is available under the NavigationExtras class.

Route Ordering

Route ordering is very important in a route configuration. If the same path is configured multiple times, the first matched path will be called. If the first match fails for some reason, the second match will be called.

Redirect Routes

An Angular route allows a path to get redirected to another path.redirectTois the option to set a redirection path. The sample route is as follows −

const routes: Routes = [ 
   { path: '', redirectTo: '/about' }, 
];

Here,

• The redirectTo property sets the redirection path to about if the actual path matches an empty string.

Wildcard Routes

The wildcard route will match any path. It is created using "**" and is used to handle non-existing paths in the application. Placing the wildcard route at the end of the configuration ensures it is called when no other path matches.

Here is the sample code is as follows −

import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
    { path: 'about', component: AboutComponent },
    { path: '',   redirectTo: '/about', pathMatch: 'full' },
	// Wildcard route for a 404 page
    { path: '**', component: PageNotFoundComponent }
  ];

Here,

If a non-existent page is requested (called), the first two routes will fail to match. However, the final wildcard route will succeed, and the PageNotFoundComponent will be displayed.

Accessing Route Parameters

In Angular, we can attach extra information to the path using a parameter. The parameter can be accessed in the component using the paramMap interface. The syntax to create a new parameter in the route is as follows:

import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
import { ItemComponent } from './item/item.component';

const routes: Routes = [
    { path: 'about', component: AboutComponent },
	//here...
    { path: 'item/:id', component: ItemComponent },
    { path: '',   redirectTo: '/about', pathMatch: 'full' },
    // Wildcard route for a 404 page
    { path: '**', component: PageNotFoundComponent }
];

Here, we have attachedthe idin the path.The idcan be accessed in theItemComponentusing two techniques.

• Using Observable.
• Using snapshot (non-observable option).

Using Observable

Angular provides a special interface named paramMap to access the parameters of the path (URL). parmaMap has the following methods −

• has(name): Returns true if the specified name is available in the path (parameter list).

• get(name): Returns the value of the specified name in the path (parameter list).

• getAll(name): Returns the multiple value of the specified name in the path. The get() method returns only the first value when multiple values are available.

• keys: Returns all parameters available in the path.

The Steps to access the parameter using paramMap are as follows −

• Import paramMap available in @angular/router package.

• Use paramMap in the ngOnInit() to access the parameter and set it to a local variable.

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        this.id = params.get('id);
    });
}

We can use it directly in the rest service usingthe pipemethod.

this.item$ = this.route.paramMap.pipe(
    switchMap(params => {
      this.selectedId = Number(params.get('id'));
      return this.service.getItem(this.selectedId);
    })
);

Using snapshot

The snapshotis similar toObservable, but it does not support observable and gets the parameter value immediately.

let id = this.route.snapshot.paramMap.get('id');

Nested Routing

In general, the router-outlet will be placed in the root component (AppComponent) of the application. However, the router-outlet can be used in any component. When a router-outlet is used in a component other than the root component, the routes for that particular component have to be configured as children of the parent component. This is called nested routing.

Let us consider a component, say ItemComponent is configured with router-outlet and has two routerLink as specified below −

<h2>Item Component</h2> 
<nav> 
   <ul> 
      <li><a routerLink="view">View</a></li> 
      <li><a routerLink="edit">Edit</a></li> 
   </ul>
</nav> 
<router-outlet></router-outlet>

The route for the ItemComponent has to be configured as Nested routing as specified below −

import { Routes } from '@angular/router';
import { ItemComponent } from './item/item.component';
import { ItemViewComponent } from './item-view/item-view.component';
import { ItemEditComponent } from './item-edit/item-edit.component';

const routes: Routes = [
    { 
       path: 'item',
       component: ItemComponent,
       children: [
       {
          path: 'view',
          component: ItemViewComponent
       },
       {
       path: 'edit',
       component: ItemEditComponent
       }
       ]
   }]

Working Example

Now, let's apply the routing concept that we have learned in this chapter to handle the navigation in ourAngular ExpenseManagerapplication.

Step 1: Open the node.js command or terminal in your IDE (such as VS code) and go to the project root folder:

cd /go/to/expense-manager

Step 2: Generate the routing module using the below command, if the app.routes.ts file does not exist:

ng generate module app-routing --routing

Once the above command runs without any error, the following will be displayed:

CREATE src/app/app-routing/app-routing-routing.module.ts (263 bytes)
CREATE src/app/app-routing/app-routing.module.ts (311 bytes)

Step 3: If the app.routes.ts file already exists, there is no need to create the above module. Simply place the code below into that file:

import { Routes } from '@angular/router';
import { ExpenseEntryListComponent } from './expense-entry-list/expense-entry-list.component';
import { ExpenseEntryComponent } from './expense-entry/expense-entry.component';

const routes: Routes = [ 
    { path: 'expenses', component: ExpenseEntryListComponent }, 
    { path: 'expenses/detail/:id', component: ExpenseEntryComponent }, 
    { path: '', redirectTo: 'expenses', pathMatch: 'full' }
]; 

Here, we have added a route for our expense list and expense details component.

Step 4: Updatethe AppComponent template(src/app/app.component.html file)to includerouter-outletandrouterLink as follows:

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> 
<div class="container"> 
   <a class="navbar-brand" href="#">{{ title }}</a> 
   <button class="navbar-toggler" 
   type="button" data-toggle="collapse" 
   data-target="#navbarResponsive" 
   aria-controls="navbarResponsive" 
   aria-expanded="false" 
   aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
   </button> 
   <div class="collapse navbar-collapse" id="navbarResponsive"> 
      <ul class="navbar-nav ml-auto"> 
         <li class="nav-item active"> 
            <a class="nav-link" href="#">Home 
               <span class="sr-only" routerLink="/">(current)</span> 
            </a> 
         </li> 
         <li class="nav-item"> 
            <a class="nav-link" routerLink="/expenses">Report</a> 
         </li> 
         <li class="nav-item"> 
            <a class="nav-link" href="#">Add Expense</a> 
         </li> 
         <li class="nav-item"> 
            <a class="nav-link" href="#">About</a> 
         </li> 
      </ul> 
   </div> 
</div> 
</nav> 
<router-outlet></router-outlet>

Step 5: Openthe ExpenseEntryListComponenttemplate (i.e., expense-entry-list.component.html) and include a view option for every expense entry:

<table class="table table-striped"> 
   <thead> 
      <tr> 
         <th>Item</th>
         <th>Amount</th> 
         <th>Category</th> 
         <th>Location</th> 
         <th>Spent On</th> 
         <th>View</th> 
      </tr> 
   </thead> 
   <tbody> 
      <tr *ngFor="let entry of expenseEntries"> 
         <th scope="row">{{ entry.item }}</th> 
         <th>{{ entry.amount }}</th> 
         <td>{{ entry.category }}</td> 
         <td>{{ entry.location }}</td> 
         <td>{{ entry.spendOn | date: 'medium' }}</td> 
         <td>
		    <a routerLink="../expenses/detail/{{ entry.id }}">View</a>
		 </td> 
      </tr> 
   </tbody> 
</table>

Here, we have updated the expense list table and added a new column to show the view option.

Step 6: OpenExpenseEntryComponent (expense-entry.component.ts)and add functionality to fetch the currently selected expense entry. It can be done by first getting the id through theparamMapand then, using thegetExpenseEntry()method fromExpenseEntryService.

this.expenseEntry$ = this.route.paramMap.pipe(  
   switchMap(params => { 
      this.selectedId = Number(params.get('id')); 
      return this.restService.getExpenseEntry(this.selectedId); })); 
this.expenseEntry$.subscribe( (data) => this.expenseEntry = data );

Step 7: Update ExpenseEntryComponent and add an option to go to the expense list.

goToList() { 
   this.router.navigate(['/expenses']); 
}

The complete code of ExpenseEntryComponent is as follows −

import { Component, OnInit } from '@angular/core'; 
import { ExpenseEntry } from '../expense-entry';
import { ExpenseEntryService } from '../expense-entry.service'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Observable, switchMap} from 'rxjs';

@Component({ 
   selector: 'app-expense-entry', 
   standalone: true,
   imports: [],
   templateUrl: './expense-entry.component.html', 
   styleUrls: ['./expense-entry.component.css'] 
}) 
export class ExpenseEntryComponent implements OnInit { 
   title: string; 
   expenseEntry$ : Observable<ExpenseEntry>; 
   expenseEntry: ExpenseEntry = {} as ExpenseEntry; 
   selectedId: number; 
   constructor(
      private restService : ExpenseEntryService, 
      private router : Router, 
      private route : 
      ActivatedRoute ) 
   { } 
   ngOnInit() { 
      this.title = "Expense Entry"; 
      this.expenseEntry$ = this.route.paramMap.pipe( 
      switchMap(params => { 
         this.selectedId = Number(params.get('id')); 
         return this.restService.getExpenseEntry(this.selectedId); })); 
		 this.expenseEntry$.subscribe( (data) => this.expenseEntry = data ); 
   } 
   goToList() { 
      this.router.navigate(['/expenses']); 
   } 
}

Step 8: Openthe ExpenseEntryComponent (expense-entry.component.html)template and add a new button to navigate back to the expense list page.

<div class="col-sm" style="text-align: right;"> 
   <button type="button" 
   class="btn btn-primary" 
   (click)="goToList()">Go to List</button>  
   <button type="button" class="btn btn-primary">Edit</button> 
</div>

Here, we have addedthe "Go to List"button beforethe "Edit"button. Run the application using below command to see the changes −

ng serve

The final output of the application is as follows −

Clicking the view option of the first entry will navigate to the details page and show the selected expense entry as shown below −

Multiple Choice Questions (MCQ's):

Here we have mentioned a few MCQs to test your knowledge on the current concept: