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

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.

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>

Read Full Article :- articlelink