Angular Js

Understand Router Navigation in Angular

by Deepak Talwar
June 25, 2022
0 Comments
5 minute read
277 Views
0 Likes

How to use Navigation, RouterLink declarative in Angular

This Article helps you to Understand, How to use Navigation, RouterLink declarative in Angular ?

It's all well and well to talk about routes, but how does one get to those routes? The routerLink directive can be used for this.

The user can change the navigation or view by clicking a link, button, or entering a URL into the browser's address bar. Every view switch can carry over the data parameters from the previous view to the new view.

There are a couple of ways of using routerLink:

Add a navigation link (routerLink)
Note: To use routerLink directive in our Component, we need to add RouterModule or AppRoutingModule in @NgModule.imports of AppModule

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { UsersComponent } from "./users/users.component";
import { ServersComponent } from "./servers/servers.component";

const appRoutes: Routes = [
  { path: "", component: HomeComponent },     { path: "users", component: UsersComponent },  { path: "servers", component: ServersComponent },
];

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

The RouterLink directives let you link to specific parts of your app.

Static router navigation

<ul class="nav nav-tabs">
  <li
    role="presentation"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }"
  >
    <a routerLink="/">Home</a>
  </li>
  <li role="presentation" routerLinkActive="active">
    <a routerLink="servers">Servers</a>
  </li>
  <li role="presentation" routerLinkActive="active">
    <a [routerLink]="['users']">Users</a>
  </li>
</ul>

We can either hardcode a string directly in the template, like its the case of the home route or the servers route. But we can also pass it an expression. If so we need to pass it an array containing the multiple URL path parts that we want to navigate to: in this case we want to navigate to the /users path.

Programmatic router navigation
Using the router programmatic API is another technique to perform router navigation. We only need to use the navigate or navigateByUrl navigation methods and inject the router into our component to do this.

onDeleteUser() {
  this.userService.deleteUser(this.id);
  this.router.navigate(["/users"]);
}

addUser() {
  this.userService.addUser(this.user);
  this.router.navigateByUrl('/users');
}

Why Not Normal Anchor, Why RoutLink?
In case of normal anchor, when we are clicking any tab, it reloads entire application (refresh browser), instead of changing content and url only
RouteLink is a special directive. RouteLink instruct angular that the element on which routeLink is placed will server like a link but behave as a click

How Angular Prepare Routes
What happen if we specify routes without a leading /
If we provide links without leading / in app.component, It will works.
But if we provide link on inner page like servers.component.html, This gives you an error message

Reason...
-- Without / it create a relative page, path relative to present working directory which is servers. In relative path, it always append the path specified in routeLink to end of your current path.
-- With / it create absolute path from root directory, always get appended to the root domain.

Note:
./server is similar to server only (i.e. without any link)
../server - will go back one path above i.e. parent path

Deepak Talwar

Technical Architect and Full Stack Developer with 18+ years of Professional Experience in Microsoft Technologies & PHP Platform. Hands on experience with C#, VB, ASP.NET, ASP.NET MVC, ASP.NET Core, ASP.NET Web API, Linq, ADO.NET, Entity Framework, Entity Framework Core, Sql Server, MYSQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, React, Angular, Laravel, Codeingiter, Serenity, VBA, Cloud Computing, Microservices, Design Patterns, Software Architecture, Web Design and Development.