How Angular Routing Works and What is Routing?

In this article, we will understand How Angular Routing Works and What is the Meaning Of routing In Angular By Sagar Jaybhay.`

What is the Meaning Of routing In Angular

Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page.

The Angular Router enables you to show different components and data to the user based on where the user is in the application. The router enables navigation from one view to the next as users perform tasks.

Angular Routing

Routing Collection is a place where we specify the URLs and components where loaded.

If you create an angular project using cli command then it will automatically add your_app_name-routing.module.ts file where we can define routes.

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import HomeComponent   from "./home/home.component";

import  LeftmenuComponent  from "./leftmenu/leftmenu.component";
import   SupplierComponent from "./supplier/supplier.component";
import  CustomerComponent  from './Customer.component';

const routes: Routes = [

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule  
angular routing file

This file needs to add in our main module file by default it is added but if it is not added by default you can go add this in this location.

Routing Module added

But for this path, we need to modify some of the Html code like below.

<p>home works!</p>
<a [routerLink]="['Home']">Home</a> <br/>
<a [routerLink]="['Customer']">Customer</a> <br/>
<a [routerLink]="['Supplier']">Supplier</a> <br/>

In the above code, we use 2 different directives routerLink and router-outlet.

base href

Most routing applications should add an <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.

If the app folder is the application root, as it is for the sample application, set the href value exactly as shown here.

src/index.html (base-href)

content_copy<base href="/">


This is used to generate a router link. In our case  http://localhost:4200/Home you can pass a parameter to the route by using the following way.

a [routerLink]="['/user/bob']" [queryParams]="debug: true" fragment="education">
    link to the user component

If you want to preserve state in the browser you can use state variable.

<a [routerLink]="['/user/bob']" [state]="tracingId: 123"> link to the user component


It is used to placed dynamically added content in our case it is a component that is associated with view. Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, the default value is “primary”.

<router-outlet name='left'></router-outlet>
<router-outlet name='right'></router-outlet>

A router outlet emits an activate event when a new component is instantiated, and a deactivate event when a component is destroyed.


GitHub Project Link: –

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s