Angular Routing

Navigation is an important aspect of web applications. A single-page application (SPA) does not have multiple-page concepts, and it moves from one view (expense list) to another view.

It provides clear and understandable navigation elements decide the success of an application.

Angular provides a comprehensive set of navigation features to accommodate simple scenarios in a complex environment.

The process of defining the navigation element and associated view is called the routing in Angular. Angular provides a separate module, the Router module, for setting up navigation in an Angular application.

Configure Routing

Angular CLI provides full support for setting up routing during the application build process and working on an application. Let’s create a new application with router enabled using the command below –

ng new routing-app

Angular CLI generate a new module, AppRoutingModule for routing purpose. The code is below –

  import { NgModule } from ‘@angular/core’;  import { Routes, RouterModule } from ‘@angular/router’;  const routes: Routes = [];  @NgModule({    imports: [RouterModule.forRoot(routes)],    exports: [RouterModule]  })  export class AppRoutingModule { }  

Router module and route @angular/router package.

RouterModel provides functionality to configure and perform routing in applications.

The route is the type used to set navigation rules.

Routes are local variables (of type Route) used to configure the actual navigation rules of the application.
The RouterMoudle.forRoot() method will set up the navigation rules configured in the route variable.

In Angular CLI, the AppComponent includes the generated AppRouting module as mention below –

  import { BrowserModule } from ‘@angular/platform browser;  import { NgModule } from ‘@angular/core’;  import { AppRoutingModule } from ‘./app-routing.module’;  import { AppComponent } from ‘./app.component’;  @NgModule({    declarations: [      AppComponent    ],    imports: [      BrowserModule,      AppRoutingModule    ],    providers: [],    bootstrap: [AppComponent]  })  export class AppModule { }  

Here,

The AppRoutingModule imports the module using the AppComponent import metadata.

Angular CLI provides an option to set routing in the existing application.

It will generate a new module with routing features enabled. To enable routing feature in an existing module (AppModule), we need to include an additional option as mentioned below –

Here,

-module app configures the routing module in the AppModule module.

Open a command prompt.

  cd /go/to/expense-manager  Generate routing module using below command –  ng generate module app-routing –module app –flat  

Output:

CREATE src/app/app-routing.module.ts (196 bytes)   UPDATE src/app/app.module.ts (785 bytes)

Here,

CLI generate AppRoutingModule and configures it in AppModule.

Creating Routes

The information to create a route is below –

  const routes: Routes = [    { path: ‘about’, component: AboutComponent },  ];  

Here,

Routes are the variable in the AppRoutingModule.

When a user requests http://localhost:4200/about url, the Path matches the about rule, and then AboutComponent will be called.

Accessing routes

Use routerLink property in the required place.

Here, the routerlink sets the route to be called using Path.

RouterLinkActive Sets the CSS class to be used when the route is active.

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

Inject the instance of Router and ActiveRoute into the respective component.

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

Here,

The router provides the function to do routing operations.

Route refers to the current activate route.

Relative Path

Root path is similar to web page URL and it supports relative path as well. To access the AboutComponent from another component, say the homepage component, in the web url or folder path the simple use.

To access the relative path in the component –

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

Route Ordering

Route ordering is an important in route configuration. If the same Path is configured multiple times, the first Path will be called. If the first match fails for any reason, the second match will be called.

Redirect route

Angular routing allows one Path to be redirected to another. There is an option to set the redirection path to redirect. The route is as follows –

Here,

If the actual Path matches an empty string, the redirect is set as the redirect path.

Wildcard route

The wildcard route will match any path. It is built using ** and will be used to handle non-existing paths in the application. It is called if the second Path does not match by placing a wildcard route at the end of the configuration.

The sample code is below –

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

If a non-existent page is called, the first two routes fail. But, the last wildcard route will succeed, and PageNotFoundComponent will be called.

Access Route Parameter

In Angular, we can append additional information to the path using parameters. Parameters can be accessed in the component using the paramMap interface. The syntax for creating a new parameter in a route is as follows –

  const routes: Routes = [    { path: ‘about’, component: AboutComponent },    { path: ‘item/:id’, component: ItemComponent },    { path: ”,   redirectTo: ‘/about’, pathMatch: ‘full’ },    { path: ‘**’, component: PageNotFoundComponent },  ];  

We have attached the id in the Path. It is accessed in the ItemComponent using two techniques.

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

Angular provides a special interface, paramMap, for accessing path parameters. parmaMap has the following methods –

is(name) – Returns true if the specified name is available in the Path (parameter list).

get(name) – Returns the name specified in the path (parameter list).

getAll(name) – Returns multiple values of the name specified in the Path. The get() method only returns the first value if multiple values are available.

Keys – Returns all the parameters available in the Path.

The steps to access parameters using ParamMap are as follows -Import paramMap available in @angular/router package.

Use paramMap in the ngOnInit() to access the parameter.

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

We use it directly in the rest service using pipe method.

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

Using snapshot

Snapshot is similar to Observable, and it cannot support observable and get the parameter value.

Nested Routing

The router-outlet will be placed in the root component of the application. But, the router-outlet can be used in any component. When router-outlets are used in a component other than the root component, the routes of the particular component must be configured as children of the parent component. It is called nested routing.

Let us consider a component, let’s say ItemComponent is configured with Router-Outlet and it has two RouterLinks 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 configured as Nested Routing as specified below –

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

Open a command prompt and go to the project root folder.

Generate routing module using the below command.

Output:

Output –

CREATE src/app/app-routing.module.ts (196 bytes) UPDATE src/app/app.module.ts (785 bytes)

CLI generate AppRoutingModule and configures it in AppModule.

Update AppRoutingModule (src/app/app.module.ts) as mentioned below –

  import { NgModule } from ‘@angular/core’;   import { Routes, RouterModule } from ‘@angular/router’; import { ExpenseEntryComponent } from ‘./expense-entry/expense-entry.component’;   import { ExpenseEntryListComponent } from ‘./expense-entry-list/expense-entry-list.component’;   const routes: Routes = [      { path: ‘expenses’, component: ExpenseEntryListComponent },      { path: ‘expenses/detail/:id’, component: ExpenseEntryComponent },      { path: ”, redirectTo: ‘expenses’, pathMatch: ‘full’ }];   

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

  <!– 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>  </textarea></div>  <p>Open <strong>ExpenseEntryListComponent</strong> template <strong>(src/app/expense-entry-list/expense-entry-list.component.html)</strong> and view option for each expense entries.</p>  <div class=”codeblock”><textarea name=”code” class=”java”>  <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>  

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

Open ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) and add functionality to fetch the current selected expense entry. It can be done by first getting the ID by paramMap and then using the getExpenseEntry() method from ExpenseEntryService.

  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 );  Update ExpenseEntryComponent and add option to expense list.  goToList() {      this.router.navigate([‘/expenses’]);   }  

The complete code of ExpenseEntryComponent is given below –

  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 } from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;   @Component({      selector: ‘app-expense-entry’,      templateUrl: ‘./expense-entry.component.html’,      styleUrls: [‘./expense-entry.component.css’]   })   export class ExpenseEntryComponent implements OnInit {      title: string;      expenseEntry$ : Observable;      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’]);      }   }  

Open ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.html) template and add a button to navigate 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>  

We have added Go to List button before the Edit button.

Run the application using the command given below –

Output –

Angular Routing

Clicking the view option of the entry will navigate to the details page and show the selected expense –

Angular Routing

Next TopicObservables in Angular

Angular Routing

Angular Routing

Configure Routing

ng new routing-app

Accessing routes

Relative Path

Route Ordering

Access Route Parameter

Using snapshot

Nested Routing

Android smartwatch for women

Automata Ambiguity in Grammar

You may also like