Navigation between routes in Angular using RouterLink

Talking about routes is fine, but how does one really get to them? This can be accomplished with the routerLink directive.

Deepak Talwar Deepak Talwar
Jan 4, 2022 - 12:05 Updated: Jan 4, 2022 - 12:05
0 8
Navigation between routes in Angular using RouterLink
angular, routes, routerlink, thetechfoyer, thetechfoyer.com

This article explains how to use RouterLink declarative navigation in Angular?

By clicking a link, button, or inputting a URL into the browser's address bar, the user can change the navigation or view. The data parameters from the previous view can be transferred to the new view with each view switch. The RouterLink directives let you link to specific parts of your app.



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 {}



Static Router Navigation

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

Either a string can be hardcoded directly into the template, as in the cases of the servers' or homes' routes above. Alternatively, we can pass it an expression. If so, we must provide it with an array that contains each of the several URL route segments we wish to visit; as in case of /users path above.



Dynamic Router Navigation

Another method for performing router navigation, is to use the router programmatic API. To accomplish this, all we have to do is inject the router into our component and use the navigate or navigateByUrl navigation methods.

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. Whereas 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

Tags: