Routing in Angular

Introduction

The Angular Router is responsible for navigation from one view to another as the user uses the application. Angular provides a package @angular/router for router built. It provides a complete router library for routing and navigation in Angular. It can have optional parameters to decide what view to load on a specific route. Angular Router is a core part of the Angular. It allows a user to build Single Page Applications. They can navigate from one page to another with a different view. We can bind routes to buttons or link in your view. Moreover, the router maintains logs in the browser's history as well. It gives us the ability to use back and forward buttons in the browser appropriately.

Routing Concepts

<Base href>
Routing applications should add a base element to index.html file as the child of the <head> tag. You need to specify your application base for the router. If your application starts at the root then specify it as "/". Angular use this base href to compose routing navigation URLs.
<base href="/">

Module import
The angular router service is not part of the angular core. It is available in a different library package. In this module, we have different directives and services which can be used for implementing navigation in our Angular app.
@angular/router. We need to import that package as below:
import { RouterModule, Routes } from '@angular/router';
We have different steps to implement routing in our applications which are mentioned below:
  • Configure the routes - It means which component or view should be visible when user clicks on a specific URL. What is a route basically? A route is basically a mapping a component to a specific URL.
  • Router outlet - It is very important to add router outlet in our angular application. It conveys router were to display a particular component when any specific route becomes active.
  • Adding links - To add links of routes in our application. On clicking on these links, different routes become active.

Configuring the routes

Suppose we have two links in our application named employees and posts. To configure routes for these two links, we need to first import the module in app.module.ts file. 

const appRoutes: Routes = [
  {
    path: 'home',
    component: LandingPageComponent,
   
  },
  {
    path: 'public-sites/:id',
    component: PublicSiteProfileComponent,
  
  },
  {
    path: 'public-sites/:id',
    component: PublicSiteComponent,
  
  },
  {
      path: '***',
      component: PageNotFoundComponent,
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
     appRoutes,
      ),
  ],
  exports: [RouterModule]
})

Router Outlet

It is a directive of the router library that is used as a component. It acts as a placeholder to tell Angular router where to place a component for a specific route. When the configuration of the routes matches with the URL path, angular displays the specific component for that path as a sibling to this router outlet element that you have placed in the host component's template.
<router-outlet></router-outlet>

Router Links 

Navigation happens on some user's action such as clicking on some anchor tag, clicking a button, etc. The routerLink directive on the specific element gives full control of the element to the router. We should specify the navigation paths as a string to the routerLink directive.
<div>
  <a routerLink="home" routerLinkActive="active">Crisis Center</a>
  <a routerLink="public-sites" routerLinkActive="active">Heroes</a>
</div>

Active router links

The RouterLinkActive directive toggles CSS classes for active routes based on the current RouterState. The 
RouterLinkActive lets us add CSS class to an element when the router links become active.
<a routerLink="/home" routerLinkActive="class1 class2">Home</a>
<a routerLink="/public-sites" [routerLinkActive]="['class1', 'class2']">Site</a>

Comments