How Angular Routing Works and What is Routing?

by ·

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 = [
{path:'Home',component:HomeComponent},
{path:'Customer',component:CustomerComponent},
{path:'Supplier',component:SupplierComponent},
{path:'',component:HomeComponent}
];

@NgModule({
  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/>
<hr>
<br/>
<br/>
<br/>
<div>
    <router-outlet></router-outlet>
</div>

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="/">

routerLink

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
  </a>

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
</a>

router-outlet

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></router-outlet>
<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.

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

GitHub Project Link: – https://github.com/Sagar-Jaybhay/angular9

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Tags:

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

You may also like...